导航栏Active Tab功能失效，请求问题排查与解决方案

原代码存在几个关键问题导致功能失效，下面逐一说明并给出修复后的完整代码：

问题分析 #

• 初始状态下没有任何元素带有active类，点击按钮时current[0]会触发报错，因为找不到对应DOM元素
• className.replace("active")用法错误：未指定替换后的空字符串，且未处理类名间的空格，会导致类名拼接成buttonactive而非正确的button active
• 缺少active状态的CSS样式，即使成功添加类也看不到视觉反馈
• HTML结构不符合语义化规范：用div包裹li，建议改为ul

修复后的完整代码 #

HTML

<ul class="active-link" id="active-link">
  <li>
    <a class="button active">him</a>
  </li>
  <li>
    <a class="button">her</a>
  </li>
  <li>
    <a class="button">xyz</a>
  </li>
</ul>

CSS

.active-link {
  display: flex;
  list-style: none;
  position: relative;
  top: 10rem;
  left: 25%;
  margin: 100px -5px;
  padding: 0; /* 清除ul默认内边距，修正布局偏移 */
}

.button {
  text-decoration: none;
  padding: 0 100px 10px;
  cursor: pointer;
  display: inline-block;
  border: none;
  background-color: transparent;
  color: #000;
  border-bottom: 2px solid #000;
  font-size: 1.5rem;
  transition: all 0.3s ease; /* 明确过渡属性和时长，提升动画流畅度 */
}

/* 统一hover和active状态的样式，符合需求的视觉效果 */
.button:hover,
.button.active {
  color: red;
  border-bottom: 5px solid red;
  padding-bottom: 7px;
}

JavaScript

const btnContainer = document.getElementById("active-link");
const btns = btnContainer.getElementsByClassName("button");

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    // 遍历所有按钮，移除active类
    Array.from(btns).forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加active类
    this.classList.add('active');
  })
}

修复说明 #

1. HTML：将外层div改为ul符合语义化；给第一个按钮添加初始active类，避免首次点击报错
2. CSS：新增.button.active样式，和hover效果保持一致；优化内边距写法；添加明确的过渡配置，让状态切换更平滑
3. JS：使用classList.add()/classList.remove()替代直接操作className，避免类名拼接错误；遍历所有按钮移除active类，确保每次只有一个激活状态；用let替代var，避免循环变量作用域问题

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