指引网

当前位置: 主页 > 网页制作 > JavaScript >

基于javascript tab切换选项卡原生写法

来源:网络 作者:佚名 点击: 时间:2017-08-07 22:17
[摘要] 下面方法很简单,就是利用ta,tb的值来获取指定div的id的style是dispay=block或none来显示或隐藏div哦,实现切换效果。//JavaScriptDocument...
下面方法很简单,就是利用ta,tb的值来获取指定div的id的style是dispay=block或none来显示或隐藏div哦,实现切换效果。

  1. // JavaScript Document  
  2. function show1(ta,tb,tt)  
  3. {  
  4.   for (i=1;i<=tb;i++)  
  5.   {  
  6.     if (tt==i)  
  7.     {  
  8.       document.getElementById(ta+"1"+tt).style.display="block";  
  9.       document.getElementById(ta+"0"+tt).className="iover";  
  10.     }  
  11.     else 
  12.     {  
  13.       document.getElementById(ta+"1"+i).style.display="none";  
  14.       document.getElementById(ta+"0"+i).className="iout";  
  15.     }  
  16.   }  
  17. }  
  18.  
  19. function show2(ta,tb,tt)  
  20. {  
  21.   for (i=1;i<=tb;i++)  
  22.   {  
  23.     if (tt==i)  
  24.     {  
  25.       document.getElementById(ta+"1"+tt).style.display="block";  
  26.       document.getElementById(ta+"0"+tt).className="iover";  
  27.     }  
  28.     else 
  29.     {  
  30.       document.getElementById(ta+"1"+i).style.display="none";  
  31.       document.getElementById(ta+"0"+i).className="iout";  
  32.     }  
  33.   }  
  34. }  
  35. function show3(ta,tb,tt)  
  36. {  
  37.   for (i=1;i<=tb;i++)  
  38.   {  
  39.     if (tt==i)  
  40.     {  
  41.       document.getElementById(ta+"1"+tt).style.display="block";  
  42.       document.getElementById(ta+"0"+tt).className="iover";  
  43.     }  
  44.     else 
  45.     {  
  46.       document.getElementById(ta+"1"+i).style.display="none";  
  47.       document.getElementById(ta+"0"+i).className="iout";  
  48.     }  
  49.   }  
  50. }  
  51.  
  52. //内容切换  
  53. function listme(alln,n,OverID,OutID,OverClass,OutClass){  
  54. for(var i=1;i<alln+1;i++){  
  55. if(i==n){  
  56. document.getElementById(OverID+i).className=OverClass;  
  57. document.getElementById(OutID+i).style.display="";  
  58. }else 
  59. {  
  60. document.getElementById(OverID+i).className=OutClass;  
  61. document.getElementById(OutID+i).style.display="none";  
  62. }  
  63. }  

 

------分隔线----------------------------