首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-13 
最简洁实用的tab切换,tab选项卡/*所有?tab选项卡?更换显示样式*/???????

最简洁实用的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?而已了?呵呵?可以单击切换?更可以?不单击鼠标切换??? 原创哦

热点排行