分享一个经典的js选项卡效果,就几行代码就可以控制全局的选项卡。下面来看一下代码
<script> <!-- function setTab(name,cursel){ for(i=1;i<=40;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); con.style.display=i==cursel?"block":"none"; } } //--> </script>
setTab这个函数有二个值,这个值分别是(name,cursel)怎么用的呢,下面来看举例说明一下
<div id="menu2" class="left" onmousemove="setTab('menu',2)">选择二</div> <div id="menu3" class="left" onmousemove="setTab('menu',3)">选择三</div> <div style="clear:both"></div> <div class="box"> <div id="con_menu_1">选择一内容</div> <div id="con_menu_2" class="none">选择二内容</div> <div id="con_menu_3" class="none">选择三内容</div> </div> <style type="text/css"> .left{ float:left; display:inline; width:60px; height:20px; text-align:center; line-height:20px; font-size:12px; background-color:Teal; color:White; margin-left:3px; } .hover{ background-color:White; color:Black;} .none{ display:none;} .box{ background:#DBDBDB; width:189px; height:80px;} </style>
onmousemove="setTab('menu',2)这就是调用我们设的函数,在这()里的内容就是传的值。 说到这大家应该不迷了 再来说一下这一句,这个判断用的在编程时用到的很多
menu.className=i==cursel?("left"+" "+"hover"):"left";
解释一下当
i==cursel为真是输出left hover为假时输出left
也就是menu.className的值就等它们输出的结果,这个就可以实现切换了。
那个循环就不说了,我想信到这大家都明白了吧。下面来看一下演示
DEMO:javascript经典的选项卡切换
本文由 kevin 创作,采用 知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。