JavaScript 实现 Tab 切换组件源码与封装教程
作者：纸飞机时间：2026-10-30 02:29:29浏览：246
本文分享一个基于原生 JavaScript 封装的 Tab 切换组件。通过简单的 HTML 结构配置与 JS 初始化调用，即可实现多标签页内容的切换显示。文章提供了完整的 HTML、CSS 及 JS 源码，并详细解析了 tabPanel 函数的参数配置与核心逻辑，帮助开发者快速集成该效果。
Tab 切换效果预览与演示
首先展示最终的 Tab 切换效果预览图。
您可以点击此处查看在线演示，或从下方获取完整源码下载。
HTML 结构搭建
接下来是构建 Tab 结构所需的 HTML 代码部分。
<!DOCTYPE html>
<html>
<head>
<title>tab测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-" />
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tab-min.js"></script>
</head>
<body>
<div id="tab">
<!-- tabHead -->
<ul class="tab-nav">
<li><a href="javascript:void()">交易安全</a></li>
<li><a href="javascript:void()">淘宝大学</a></li>
<li><a href="javascript:void()">爱心</a></li>
</ul>
<!-- tabPanel-->
<ul class="tab-bd">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
tabPanel({"panel":"tab"});//panel为必填项，default、defalutStyle、hoverStyle为选填项
</script>
</body>
</html>
JavaScript 核心逻辑实现
随后提供实现交互逻辑的核心 JavaScript 代码。
function tabPanel(param){
var defaultIndex=param["default"]||,//设置显示的页面
panelobj=param["panel"],//设置tab容器
defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式
hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式
currentIndex=defaultIndex,
menus=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
contents=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
menuNumber=menus.length,
hidden="hidden";
for(var i=;i<menuNumber;i++){
_setClass(contents[],hoverClass);
_setClass(contents[i],hidden);
_setClass(menus[i],defalutClass);
(function(i){
menus[i].onmouseover=function(){
var old=menus[currentIndex];
_setClass(old,defalutClass);
_setClass(contents[currentIndex],hidden);
var cur=menus[i];
_setClass(cur,hoverClass);
currentIndex=i;
_setClass(contents[i],"");
};
})(i);
}
_setClass(menus[currentIndex],hoverClass);
_setClass(contents[currentIndex],"");
//便利函数
function _setClass(obj,className){obj.className=className}
function _$(oid){return typeof(oid) == "string"?document.getElementById(oid):oid}
}
CSS 样式控制
最后附上用于控制样式表现的 CSS 代码。
#tab{border:px solid #ccc;}
#tab .tab-bd{border-top:none;margin: auto;padding:px;text-align:left;height:px;position:relative}
.tab-nav{margin: auto;padding:;background:#eee;height:px;}
.tab-nav li{display:inline;list-style:none outside none;width:px;height:px;float:left;line-height:px;text-align:center;}
.tab-nav li a{color:#;display:inline-block}
.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#;display:block; }
.hidden{display:none}作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28