如何在导航栏中高亮激活标签并实现点击切换激活状态

AI 小北

2026-5-12

导航栏激活标签高亮与切换功能实现方案

Hey! 刚好能帮你搞定导航栏激活状态高亮+点击切换的需求，下面是完整的可运行代码，我把各个模块都梳理清楚了：

HTML 结构

这是基础的导航栏布局，默认给「Home」标签加上了active类作为初始激活状态：

<div class="nav"> 
  <ul> 
    <li class="active"><a id="home" href="#">Home</a></li> 
    <li><a id="story" href="#">Our Story</a></li> 
    <li><a id="Menus" href="#">Menus</a></li> 
    <li><a id="OrderOnline" href="#">Order Online</a></li> 
    <li><a id="contact" href="#contact">Contact & Reservations</a></li> 
  </ul> 
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS 样式

这里定义了导航栏的基础外观，核心是通过li.active a设置激活标签的高亮颜色（和hover效果保持一致的金色）：

.nav { 
  background-color: #510A32; 
  height: 120px; 
  background-size: cover; /* 修正了原代码的小问题，原`background: cover`应该是`background-size: cover`哦 */
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  top: 0; 
} 
.nav ul { 
  list-style-type: none; 
} 
.nav li { 
  float: left; 
  padding: 30px 40px 70px 0px; 
  font-family: Arial; 
} 
.nav li a { 
  display: block; 
  color: #fff; 
  padding: 14px 16px; 
  text-decoration: none; 
  font-weight: bold; 
} 
.nav ul li:hover a { 
  color: gold; 
} 
li.active a { 
  color: gold; 
}

JavaScript 逻辑

用jQuery实现点击切换激活状态的核心逻辑：点击任意导航项时，先移除所有li的active类，再给当前点击的li添加上这个类，就能完成激活状态的切换了：

$(function() { 
  $('.nav ul li').on('click', function() { 
    $(this).parent().find('li.active').removeClass('active'); 
    $(this).addClass('active'); 
  }); 
});