溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS實現的簡單tab切換功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net tab切換</title>
<style>
* {
padding: 0;
margin: 0
}
body {
font-size: 12px
}
ul, li, ol {
list-style: none
}
a {
text-decoration: none
}
.clearfix {
clear: both;
overflow: hidden
}
.tab_title ul li {
float: left;
padding: 0 10px
}
</style>
</head>
<body>
<div id="Tab1" class="tab clearfix">
<div class="tab_title clearfix">
<ul>
<li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',1,3)" id="one1">TAB1</a></li>
<li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',2,3)" id="one2">TAB2</a></li>
<li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',3,3)" id="one3">TAB3</a></li>
</ul>
</div>
<div class="tab_details clearfix">
<div id="con_one_1" >con_one_1</div>
<div id="con_one_2">con_one_2</div>
<div id="con_one_3">con_one_3</div>
</div>
</div>
<script type="text/javascript">
//tab切換效果
function setTab(name, cursel, n) {
for(var i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var con = document.getElementById("con_" + name + "_" + i);
menu.className = i == cursel ? "cur" : "";
con.style.display = i == cursel ? "block" : "none";
}
}
</script>
</body>
</html>
運行結果：
感興趣的朋友可以使用本站在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun，測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
