最简洁实用的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  οnclick="setTab(4,0)" class="chostab"><i>最新上架</i></span>   
17.                <span  οnclick="setTab(4,1)"><i>最低价格</i></span>   
18.                <span  οnclick="setTab(4,2)"><i>最高销量</i></span>   
19.                <span  οnclick="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 而已了 呵呵 可以单击切换 更可以 不单击鼠标切换    原创哦