1、HTML 结构：
构建包含 Tab 标题和对应内容面板的 HTML 结构，通常使用无序列表（<ul>）表示 Tab 标题，使用多个 <div> 表示内容面板。
<!-- 1、实现tab栏切换；2、切换当前颜色；--> <div class="tab-container"> <ul class="tab-nav"> <li class="tab-link active" data-tab="tab1">Tab 1</li> <li class="tab-link" data-tab="tab2">Tab 2</li> <li class="tab-link" data-tab="tab3">Tab 3</li> </ul> <div class="tab-content content-active" id="tab1"> <p>这是Tab 1的内容</p> </div> <div class="tab-content" id="tab2"> <p>这是Tab 2的内容</p> </div> <div class="tab-content" id="tab3"> <p>这是Tab 3的内容</p> </div> </div>
2、CSS 样式：
设置 Tab 栏的基本样式，如背景颜色、字体样式等，并默认隐藏除第一个内容面板之外的其他内容面板。
/* tab容器 */
.tab-container {
width: 500px;
margin: 0 auto;
}
/* tab导航栏 */
.tab-nav {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
border-bottom: 1px solid #ccc;
}
/* tab标签 */
.tab-link {
padding: 5px 20px;
cursor: pointer;
border: 1px solid #ccc;
border-bottom: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* 当前激活的tab标签 */
.tab-link.active {
background-color: #f0f0f0;
}
/* tab内容区域 */
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 初始显示的tab内容 */
.content-active {
display: block;
}3、jQuery 交互：
使用 jQuery 监听 Tab 标题的点击事件，当点击某个 Tab 标题时，切换该标题的选中状态，并显示对应的内容面板，隐藏其他内容面板。
$('.tab-link').on('click', function() {
// 1、为当前点击的tab标签添加active类，其它兄弟tab标签移除active类
$(this).addClass('active').siblings().removeClass('active');
// 2、获取当前点击的tab-link索引号$(this).index()
// 3、显示当前点击的tab标签对应的tab内容，其它兄弟tab-content类隐藏
$('.tab-content').eq($(this).index()).show().siblings('.tab-content').hide();
})
