- /*===========所有 tab选项卡 更换显示样式=====================*/
- function setTab(m,n){
- var tli=document.getElementById("menu"+m).getElementsByTagName("span");
- var mli=document.getElementById("main"+m).getElementsByTagName("div");
- for(i=0;i<tli.length;i++){
- tli[i].className=i==n?"chostab":"";
- mli[i].style.display=i==n?"block":"none";
- }
- }
- /*===========html 中的应用代码=====================*/
- <div id="menu4" class="p_kinds">
- <i class="paixu">排序:</i>
- <span οnclick="setTab(4,0)" class="chostab"><i>最新上架</i></span>
- <span οnclick="setTab(4,1)"><i>最低价格</i></span>
- <span οnclick="setTab(4,2)"><i>最高销量</i></span>
- <span οnclick="setTab(4,3)"><i>最低折扣</i></span>
- <br class="clear"/>
- </div>
- <div id="main4">
- <div class="block">0 </div>
- <div>1 </div>
- <div>2 </div>
- <div>3 </div>
- </div>
- /*===========下面div必须要一一对应的哦不然 是没效果的= 下面div要隐藏的 display:none即可====================*/
- 本人收集 平时中国设计中 最常用tab 切换效果 很多js写的都很多 很多很长 感觉很复杂甚至恶心了都 加载也慢!!! 所以我简洁了很多代码 只需要在下面的 div中 加入 onlick 还是onmousemove 而已了 呵呵 可以单击切换 更可以 不单击鼠标切换 原创哦
最简洁实用的tab切换,tab选项卡
最新推荐文章于 2018-06-04 19:48:01 发布