CSS标签页切换：display与active类使用详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS实现标签页切换：display与active类详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

标签页切换通过CSS和JavaScript实现，点击选项卡时高亮当前按钮并显示对应内容。HTML结构包含.tab-item按钮和.tab-content面板，CSS设置.tab-content默认隐藏（display: none），仅.active项显示（display: block）。JavaScript为每个.tab-item绑定点击事件：移除所有active类，再为当前tab及关联内容添加active类，实现内容切换。关键点在于data-tab与id匹配，确保正确关联按钮与面板，控制显示隐藏。

标签页切换是前端开发中常见的交互效果。使用 CSS 配合 JavaScript，通过控制 display 属性和添加/移除 active 类，可以轻松实现内容切换。

HTML 结构

<div class="tab-container">
  <ul class="tabs">
    <li class="tab-item active" data-tab="tab1">首页</li>
    <li class="tab-item" data-tab="tab2">关于</li>
    <li class="tab-item" data-tab="tab3">设置</li>
  </ul>

  <div id="tab1" class="tab-content active">这里是首页内容</div>
  <div id="tab2" class="tab-content">这里是关于内容</div>
  <div id="tab3" class="tab-content">这里是设置内容</div>
</div>

CSS 样式控制显示隐藏

• .tab-content 设置 display: none
• .tab-content.active 设置 display: block（或 flex、inline-block 等）
• 通过类名切换来控制哪一块内容可见

JavaScript 实现切换逻辑

document.querySelectorAll('.tab-item').forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有 active 类
    document.querySelectorAll('.tab-item').forEach(i => i.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

    // 给当前点击的 tab 和对应内容添加 active
    this.classList.add('active');
    const tabId = this.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});

效果说明

• 当前 tab 按钮高亮（通过 active 类样式）
• 其他内容面板 display: none，不可见
• 对应的内容块 display: block，显示出来

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~