js实现鼠标悬浮切换 setTab 代码实现
一款经典的js切换效果、
js代码:
function rashow(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
con.style.display=i==cursel?"block":"none";
}
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
con.style.display=i==cursel?"block":"none";
}
html代码:
<a id="qh1" onmouseover="setTab('qh',1,3)">切换1</a>
<a id="qh2" onmouseover="setTab('qh',2,3)">切换2</a>
<a id="qh3" onmouseover="setTab('qh',3,3)">切换3</a>
<div id="con_qh_1" class=layou" style="display:block">
切换内容1
</div>
<div id="con_qh_2" class=layou" style="display:block">
切换内容2
</div>
<div id="con_qh_3" class=layou" style="display:block">
切换内容3
</div>
<a id="qh2" onmouseover="setTab('qh',2,3)">切换2</a>
<a id="qh3" onmouseover="setTab('qh',3,3)">切换3</a>
<div id="con_qh_1" class=layou" style="display:block">
切换内容1
</div>
<div id="con_qh_2" class=layou" style="display:block">
切换内容2
</div>
<div id="con_qh_3" class=layou" style="display:block">
切换内容3
</div>