Tab切换特效列表切换特效

切换特效核心代码：

js代码：

<script type="text/javascript">

function setTab(name,cursel,n) {

for (i = 1; i <= n; i++) {

var menu = document.getElementById(name + i);

var con = document.getElementById("con_" + name + "_" + i);

menu.className = i == cursel ? "hover" : "";

con.style.display = i == cursel ? "block" : "none";

}

}

</script>

网页代码：

<li id="five1" onmouseover="setTab('five',1,2)" >选项卡1</li>

<li id="five2" onmouseover="setTab('five',2,3)" >选项卡2</li>

<li id="five3" onmouseover="setTab('five',3,3)" >选项卡3</li>

<div id="con_five_1" > 选项卡1内容 </div>

<div id="con_five_2" "display:none"> 选项卡2内容 </div>

<div id="con_five_3" "display:none"> 选项卡3内容 </div>

成品效果案例：

本文链接：https://www.weguiding.com/qiehuan/195.html