点击切换li元素样式：网站本地导航菜单交互效果实现问询

我来帮你搞定这个导航菜单的点击样式切换需求！先梳理下现有代码里的几个小问题，再给你一套完整的实现方案：

首先，先修正现有代码的小问题 #

1. 重复ID问题：你的HTML里<li>和<a>都用了id="exploreTitle"，ID在页面里必须唯一，得改掉这个。
2. CSS类命名冗余：liNav和liNavA大部分样式重复，其实可以合并基础样式，只把变化的部分拆分出来。
3. 缺少点击事件逻辑：目前只有初始的类添加，没有处理点击切换的代码，这是核心缺失的部分。

完整实现代码 #

1. HTML结构（修正ID问题） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
  <ul class="localNav">
    <li class="liNav active" id="exploreLi"><a class="nav-link" href="#">Explore</a></li>
    <li class="liNav"><a class="nav-link" href="#">Who already joined</a></li>
    <li class="liNav"><a class="nav-link" href="#">Why develop for us </a></li>
  </ul>
</div>

2. CSS样式（简化合并，清晰区分状态） #

/* 导航列表基础样式 */
.localNav {
  padding: 0; /* 去掉默认ul内边距 */
}
.liNav {
  list-style-type: none;
  display: inline-block;
  margin-top: 18px;
  margin-left: 4px;
  border: solid 12px white; /* 默认白色边框 */
  border-radius: 24px;
  background-color: white; /* 默认白色背景 */
  transition: all 0.3s ease; /* 加个过渡动画更丝滑 */
}
/* 激活状态（点击后）的li样式 */
.liNav.active {
  border-color: black;
  background-color: black;
}
/* 导航链接基础样式 */
.nav-link {
  display: inline-block;
  padding: 8px 16px; /* 给链接加内边距，点击区域更大 */
  color: black; /* 默认黑色文字 */
  text-decoration: none;
}
/* 激活状态的链接样式 */
.liNav.active .nav-link {
  color: white; /* 激活后白色文字 */
}

3. jQuery点击事件处理 #

$(document).ready(function() {
  // 点击导航链接时切换状态
  $(".nav-link").click(function(e) {
    e.preventDefault(); // 阻止默认跳转（如果是真实跳转链接可以去掉）
    // 先移除所有li的active类
    $(".liNav").removeClass("active");
    // 给当前点击的链接的父元素li添加active类
    $(this).parent(".liNav").addClass("active");
  });
});

实现效果说明 #

• 初始状态：第一个菜单项是激活状态（黑边框、黑背景、白文字），其他是默认状态
• 点击任意菜单项时：
  • 该菜单项的<li>会加上active类，边框变成黑色，背景变成黑色
  • 对应的<a>文字会变成白色
  • 其他菜单项会恢复默认状态

这样就完美实现了你想要的点击切换效果，而且代码更简洁易维护！

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