如何为选中的HTML导航Tab添加阴影并实现选中状态切换？

嘿，这个需求其实很好实现，咱们可以通过HTML结构定义 + CSS样式控制 + 少量JavaScript交互来搞定，核心思路是用一个专属类标记选中的Tab，切换时转移这个类的归属就行。下面一步步来：

1. 先搭好HTML结构 #

首先咱们需要一个Tab容器，里面放各个Tab项，推荐用<button>（纯交互场景更语义化）或者<a>标签，给每个Tab加个通用类，再给默认选中的Tab加上标记类（比如active-tab）：

<div class="tab-container">
  <button class="tab-link active-tab">Employee table</button>
  <button class="tab-link">Global</button>
  <button class="tab-link">Settings</button>
</div>

2. 写CSS样式（重点是选中状态的阴影） #

先给Tab写基础样式，然后给active-tab类加上阴影效果，同时可以调整背景、边框这些，让选中状态更明显：

/* 基础Tab容器样式 */
.tab-container {
  display: flex;
  gap: 8px;
  padding: 10px;
}

/* 通用Tab样式 */
.tab-link {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease; /* 加个过渡动画，切换更丝滑 */
}

/* 选中状态的阴影+高亮样式 */
.tab-link.active-tab {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 这里就是你要的阴影效果，参数可以按需调整 */
  background-color: #fff;
  font-weight: 500;
}

/* 非选中Tab的悬停效果（可选） */
.tab-link:hover:not(.active-tab) {
  background-color: #e5e5e5;
}

3. 用JavaScript处理切换逻辑 #

当用户点击某个Tab时，我们需要先移除所有Tab的active-tab类，再给当前点击的Tab加上这个类，这样就能实现阴影状态的转移：

// 获取所有Tab元素
const tabLinks = document.querySelectorAll('.tab-link');

// 给每个Tab绑定点击事件
tabLinks.forEach(tab => {
  tab.addEventListener('click', () => {
    // 先移除所有Tab的选中类
    tabLinks.forEach(item => item.classList.remove('active-tab'));
    // 给当前点击的Tab加上选中类
    tab.classList.add('active-tab');
  });
});

额外补充 #

如果你的Tab是用来切换对应内容面板的，只需要在点击事件里再加一段逻辑，显示对应面板、隐藏其他面板即可，核心的选中状态控制还是上面这套逻辑。要是用React、Vue这类框架，实现会更简单——直接用状态变量绑定类名就行，比如Vue里的:class="{ 'active-tab': currentTab === 'employee' }"。

内容的提问来源于stack exchange，提问作者user9065477