本文介绍如何使用HTML、CSS和jQuery实现一个轻量级的自定义Tab选项卡。通过规范HTML结构，利用Flexbox布局优化导航与内容区域的排列，并配合简单的JavaScript事件绑定实现点击切换功能。代码示例展示了如何仅通过少量类名控制样式，确保结构清晰且易于维护。
Tab选项卡实现概述
实现自定义Tab选项卡功能，具体实现步骤如下。
HTML结构规范
规范HTML结构
在构建选项卡之前，首先需要明确并规范HTML的代码结构。
<div class="m-tab-container">
<ul >
<li class="active"><a href="#pane1">面板1</a></li>
<li><a href="#pane2" rel="external nofollow" >面板2</a></li>
</ul>
<div>
<div id="pane1" class="active">
这是面板1
</div>
<div id="pane2">
这是面板2
</div>
</div>
</div>
如上述代码所示，此处并未定义过多的类名，仅保留了容器样式类 和激活状态类 。其余元素的样式均通过这两个基础类进行层级查找与设置。
CSS样式设计
设计CSS样式
.m-tab-container{
display:flex;
}
.m-tab-container>ul, .m-tab-container>div{
padding:0;
margin:0;
}
.m-tab-container>ul{
flex:0;
min-width:50px;
}
.m-tab-container>div{
position:relative;
flex:1;
border:1px solid #ddd;
background-color:#fff;
padding:10px;
z-index:2;
}
.m-tab-container>ul>li{
display:block;
margin:0 0 5px 0;
}
.m-tab-container>ul>li>a{
position:relative;
line-height:40px;
display:block;
width:100%;
text-align:center;
text-decoration:none;
background-color:#fff;
border: 1px solid #ddd;
border-right:0;
z-index:1;
}
.m-tab-container>ul>li>a,
.m-tab-container>ul>li.active>a:hover,
.m-tab-container>ul>li.active>a:link,
.m-tab-container>ul>li.active>a:visited,
.m-tab-container>ul>li.active>a:active{
color:#000;
}
.m-tab-container>ul>li.active>a{
z-index:3;
}
.m-tab-container>div>div{
display:none;
}
.m-tab-container>div>div.active{
display:block;
}
.m-tab-container>ul>li.active,
.m-tab-container>ul>li.active>a{
cursor: default;
}
将 li 内的 a 标签 display 设为 block，其长度超出 li 并覆盖内容面板边框以形成空缺（测试表明，li 设置边框后与内容面板 div 边框间距不足 1px，也可通过 margin 使 li 与 div 重叠，利用 li 覆盖 div 边框）。
JavaScript交互逻辑
绑定JS代码
(function($) {
// 页面加载后的工作
$("div.m-tab-container li a").on("click", function(e) {
e.preventDefault();
// 可以在这里判断被点击的a标签是否已经激活
$(".active").removeClass("active");
$(this).closest("li").addClass("active")
$($(this).attr("href")).addClass("active");
})
})(jQuery);
以上即为本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。