css如何制作简易选项卡切换_使用display:none/block和active类控制

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css如何制作简易选项卡切换_使用display:none/block和active类控制

2025-12-06

浏览次数：次

返回列表

答案是使用data-tab属性关联标签与内容，通过J*aScript切换active类，结合CSS的display属性控制显示隐藏，实现选项卡切换效果。

css如何制作简易选项卡切换_使用display:none/block和active类控制

要使用CSS和J*aScript制作一个简易的选项卡切换效果，核心思路是通过控制内容区域的 display 属性（none 隐藏，block 显示），并结合为当前激活的标签添加 active 类来实现视觉反馈。下面是一个简单、实用的实现方法。

HTML 结构

定义选项卡标题和对应的内容区域：

选项1

选项2

选项3

  这是选项卡1的内容
  这是选项卡2的内容
  这是选项卡3的内容

CSS 样式

设置基本样式，并用 display: none 隐藏非激活内容：

简小派

简小派是一款AI原生求职工具，通过简历优化、岗位匹配、项目生成、模拟面试与智能投递，全链路提升求职成功率，帮助普通人更快拿到更好的 offer。

123 查看详情简小派

.tab-header {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.tab-header li {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #f5f5f5;
  margin-right: 5px;
}

.tab-header li.active {
  background: #007cba;
  color: white;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: -1px;
}

.tab-content.active {
  display: block;
}

J*aScript 控制切换

点击标签时移除所有 active 类，并为当前项和对应内容添加：

document.querySelectorAll('.tab-header li').forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除之前的 active 状态
    document.querySelector('.tab-header li.active')?.classList.remove('active');
    document.querySelector('.tab-content.active')?.classList.remove('active');

    // 添加当前 active 状态
    const tabId = tab.dataset.tab;
    tab.classList.add('active');
    document.getElementById(tabId).classList.add('active');
  });
});