如果这世上真有奇迹，那只是努力的另一个名字。人生从来没有真正的绝境。无论遭受多少艰辛，无论经历多少苦难，只要一个人的心中还怀着一粒信念的种子，那么总有一天，他就能走出困境，让生命重新开花结果。
本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.haodaima.com 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" rel="nofollow noopener noreferrer" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',1,3)" id="one1">TAB1</a></li>
<li><a target="_self" rel="nofollow noopener noreferrer" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',2,3)" id="one2">TAB2</a></li>
<li><a target="_self" rel="nofollow noopener noreferrer" 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" style="display: block;">con_one_1</div>
<div style="display: none;" id="con_one_2">con_one_2</div>
<div style="display: none;" 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.haodaima.com/code/HtmlJsRun，测试上述代码运行效果。
希望本文所述对大家JavaScript程序设计有所帮助。
到此这篇关于JS实现的简单tab切换功能完整示例就介绍到这了。浪费时间可惜；生而不学可惜；学而无成更可惜。更多相关JS实现的简单tab切换功能完整示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
