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

/*===========所有 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  onclick="setTab(4,0)" class="chostab"><i>最新上架</i></span>
               <span  onclick="setTab(4,1)"><i>最低价格</i></span>
               <span  onclick="setTab(4,2)"><i>最高销量</i></span>
               <span  onclick="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 而已了 呵呵 可以单击切换 更可以 不单击鼠标切换    原创哦