本文实例讲述了JS实现的tab页切换效果。分享给大家供大家参考，具体如下：
效果图如下：
![\"\"](\"/images/51jb/1545107296JM154515072906.gif\")
完整实例代码：
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
< >www.jb51.net JS实现的TAB切换</ >
<style type=\"text/css\">
#content {
width: 400px;
height: 200px;
}
#tab_bar {
width: 400px;
height: 20px;
float: left;
}
#tab_bar ul {
padding: 0px;
margin: 0px;
height: 20px;
text-align: center;
}
#tab_bar li {
list-style-type: none;
float: left;
width: 133.3px;
height: 20px;
background-color: gray;
}
.tab_css {
width: 400px;
height: 200px;
background-color: orange;
display: none;
float: left;
}
</style>
< type=\"text/ \">
var myclick = function(v) {
var llis = document.getElementsByTagName(\"li\");
for(var i = 0; i < llis.length; i++) {
var lli = llis[i];
if(lli == document.getElementById(\"tab\" + v)) {
lli.style.backgroundColor = \"orange\";
} else {
lli.style.backgroundColor = \"gray\";
}
}
var divs = document.getElementsByClassName(\"tab_css\");
for(var i = 0; i < divs.length; i++) {
var divv = divs[i];
if(divv == document.getElementById(\"tab\" + v + \"_content\")) {
divv.style.display = \"block\";
} else {
divv.style.display = \"none\";
}
}
}
</ >
</head>
<body>
<div id=\"content\">
<div id=\"tab_bar\">
<ul>
<li id=\"tab1\" =\"myclick(1)\" style=\"background-color: orange\">
tab1
</li>
<li id=\"tab2\" =\"myclick(2)\">
tab2
</li>
<li id=\"tab3\" =\"myclick(3)\">
tab3
</li>
</ul>
</div>
<div class=\"tab_css\" id=\"tab1_content\" style=\"display: block\">
<div>页面一</div>
</div>
<div class=\"tab_css\" id=\"tab2_content\">
<div>页面二</div>
</div>
<div class=\"tab_css\" id=\"tab3_content\">
<div>页面三</div>
</div>
</div>
</body>
</html>
感兴趣的朋友可以使用本站在线HTML/CSS/ 代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试上述代码运行效果。
更多关于 相关内容感兴趣的读者可查看本站专题：《 切换特效与技巧总结》、《 遍历算法与技巧总结》、《 查找算法技巧总结》、《 动画特效与技巧汇总》、《 错误与调试技巧总结》、《 数据结构与算法技巧总结》及《 数学运算用法总结》
希望本文所述对大家 程序设计有所帮助。
继续阅读与本文标签相同的文章
-
这3大医疗咨询APP开发优势，你了解吗？
2026-05-18栏目： 教程
-
众创空间WeWork暂停中国扩张：大中华区已是第三大市场
2026-05-18栏目： 教程
-
创建人物百科，怎么创建人物百科词条？
2026-05-18栏目： 教程
-
传统制造业牵手人工智能 开启智慧鞍山建设新时代
2026-05-18栏目： 教程
-
详解安检违禁品识别设计方案
2026-05-18栏目： 教程