君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>切换特效>正文

Tab切换特效列表切换特效

2019-01-24 12:02 君语贤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>

成品效果案例:

Tab切换特效列表切换特效

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