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

分享一个经典的js选项卡效果，就几行代码就可以控制全局的选项卡。下面来看一下代码：

<script>
<!–
function setTab(name,cursel){
for(i=1;i<=40;i++){
var menu=document.getElementByIdx_x(name+i);
var con=document.getElementByIdx_x(“con_”+name+”_”+i);
var con=document.getElementByIdx_x(“con_”+name+”_”+i);
con.style.display=i==cursel?”block”:”none”;
}
}
//–>
</script>

setTab这个函数有二个值，这个值分别是（name,cursel）怎么用的呢，下面来看举例说明一下：

<div id=”menu2″ onmousemove=”setTab(‘menu’,2)”>选择二</div>
<div id=”menu3″ onmousemove=”setTab(‘menu’,3)”>选择三</div>
<div style=”clear:both”></div>
<div>
<div id=”con_menu_1″>选择一内容</div>
<div id=”con_menu_2″ >选择二内容</div>
<div id=”con_menu_3″ >选择三内容</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的值就等它们输出的结果，这个就可以实现切换了。