您的位置: 首页  >  IT文章  >  最简要实用的tab切换，tab选项卡

最简要实用的tab切换，tab选项卡

分类: IT文章 • 2022-08-11 09:17:09
最简洁实用的tab切换，tab选项卡
  1. /*===========所有 tab选项卡 更换显示样式=====================*/  
  2.   
  3.     function setTab(m,n){   
  4.      var tli=document.getElementById("menu"+m).getElementsByTagName("span");   
  5.      var mli=document.getElementById("main"+m).getElementsByTagName("div");   
  6.      for(i=0;i<tli.length;i++){   
  7.       tli[i].className=i==n?"chostab":"";   
  8.       mli[i].style.display=i==n?"block":"none";   
  9.      }   
  10.     }   
  11.   
  12. /*===========html 中的应用代码=====================*/  
  13.   
  14.             <div id="menu4" class="p_kinds">   
  15.                <i class="paixu">排序：</i>   
  16.                <span  onclick="setTab(4,0)" class="chostab"><i>最新上架</i></span>   
  17.                <span  onclick="setTab(4,1)"><i>最低价格</i></span>   
  18.                <span  onclick="setTab(4,2)"><i>最高销量</i></span>   
  19.                <span  onclick="setTab(4,3)"><i>最低折扣</i></span>   
  20.                <br class="clear"/>   
  21.              </div>   
  22.   
  23.              <div id="main4">                
  24.                <div class="block">0 </div>   
  25.                 <div>1 </div>   
  26.   
  27.                  <div>2 </div>   
  28.   
  29.                  <div>3 </div>   
  30.   
  31.                </div>   
  32.                   
  33. /*===========下面div必须要一一对应的哦不然 是没效果的= 下面div要隐藏的 display：none即可====================*/  
  34.   
  35.   
  36. 本人收集 平时中国设计中 最常用tab 切换效果  很多js写的都很多 很多很长 感觉很复杂甚至恶心了都 加载也慢！！！ 所以我简洁了很多代码  只需要在下面的 div中 加入 onlick  还是onmousemove 而已了 呵呵 可以单击切换 更可以 不单击鼠标切换    原创哦

相关推荐