如何为Navbar实现活跃标签（Active Tab）的标记？

静态场景（纯HTML+CSS） #

直接给当前活跃的标签元素加自定义类名（比如active），再用CSS针对这个类写差异化样式就能实现标记：

HTML结构 #

<nav class="navbar">
  <a href="#" class="nav-item active">首页</a>
  <a href="#" class="nav-item">产品</a>
  <a href="#" class="nav-item">关于我们</a>
</nav>

CSS样式 #

.navbar .nav-item {
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}
/* 活跃标签样式 */
.navbar .nav-item.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
  font-weight: bold;
}

动态场景（交互/路由匹配） #

如果需要点击切换活跃状态，或者页面跳转后自动匹配标签，用JS或框架路由能力处理：

原生JavaScript实现点击切换 #

// 获取所有导航项
const navItems = document.querySelectorAll('.nav-item');

// 绑定点击事件切换活跃类
navItems.forEach(item => {
  item.addEventListener('click', () => {
    navItems.forEach(nav => nav.classList.remove('active'));
    item.classList.add('active');
  });
});

框架路由匹配（以Vue为例） #

利用Vue Router的router-link自带属性，自动匹配路由添加活跃类：

<router-link to="/" active-class="active">首页</router-link>
<router-link to="/products" active-class="active">产品</router-link>
<router-link to="/about" active-class="active">关于我们</router-link>

CSS样式和静态场景保持一致即可。

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