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

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

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

html 结构

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

CSS 样式

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

.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;
}

JavaScript 控制切换

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

Motiff

Motiff是由猿辅导旗下的一款界面设计工具，定位为“AI时代设计工具”

126

查看详情

立即学习“前端免费学习笔记（深入）”；

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’);
  });
});

关键点说明

data-tab 属性：用于关联标题和内容，简洁清晰。
active 类控制显示：CSS 中通过 .tab-content.active { display: block; } 控制可见性。
JavaScript 只负责切换类名：不直接操作样式，保持结构与行为分离。

基本上就这些。这个方案轻量、易懂，适合在静态页面或小型项目中快速实现选项卡功能。

以上就是