javascript经典的选项卡切换（详解）

分享一个经典的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经典的选项卡切换