[JavaScript] javascript采用数组实现tab菜单切换效果 →→→→→进入此内容的聊天室

来自 , 2020-02-27, 写在 JavaScript, 查看 165 次.
URL http://www.code666.cn/view/b16574c5
  1.  
  2. sx.activex.tabmenu={
  3. create:function(t){
  4. var a=document.createElement("div");
  5. var head=document.createElement("div");
  6. var body=document.createElement("div");
  7. var blank=document.createElement("span");
  8. a.style.height="200px";
  9. a.style.width="300px";
  10. //a.style.border="1px red solid";
  11. head.style.height="15%";
  12. //head.style.overflow="hidden";
  13. head.style.width="100%";
  14. blank.style.width=100-20*t.length+"%";
  15. blank.style.height="100%";
  16. blank.style.borderBottom="1px red solid";
  17. blank.style.lineHeight=parseInt(a.style.height)*0.15+"px";;
  18. body.innerHTML=t[0][1];
  19. body.style.height="85%";
  20. body.style.padding="10px";
  21. body.style.border="1px red solid";
  22. body.style.borderTop="0px";
  23. for(var i=0;i<t.length;i++){
  24. var tab=document.createElement("span");
  25. tab.style.border="1px red solid";
  26. tab.style.width="20%";
  27. tab.style.lineHeight=parseInt(a.style.height)*0.15+"px";
  28. tab.style.textAlign="center";
  29. tab.style.height="100%";
  30. tab.style.backgroundColor="yellow";
  31. tab.style.cursor="hand";
  32. tab.innerHTML=t[i][0];
  33. tab.onclick=function(r){
  34. return function(){
  35. for(var i1 in head.all){
  36. if(head.all[i1]!=this && head.all[i1].tagName=="SPAN")
  37. head.all[i1].style.borderBottom="1px red solid";
  38. this.style.borderBottom="0px";
  39.  
  40. }
  41. body.innerHTML=t[r][1];
  42. }
  43. }(i);
  44. head.appendChild(tab);;
  45. }
  46. head.firstChild.style.borderBottom="0px";
  47. head.appendChild(blank);
  48. a.appendChild(head);
  49. a.appendChild(body);
  50. return a;
  51. }
  52. }
  53.  
  54.  
  55. //javascript/5923

回复 "javascript采用数组实现tab菜单切换效果"

这儿你可以回复上面这条便签

captcha