如何保持导航菜单选中项状态？纯CSS或JS实现方案咨询

一、纯CSS实现选中状态保持 #

核心思路是利用CSS的:target伪类，结合页面内锚点链接实现状态留存：

• 实现步骤：
  1. 给导航项链接设置锚点，对应页面内目标元素的ID：

     <nav>
       <a href="#home" class="nav-item">首页</a>
       <a href="#about" class="nav-item">关于</a>
       <a href="#contact" class="nav-item">联系</a>
     </nav>
     
     <section id="home">首页内容</section>
     <section id="about">关于内容</section>
     <section id="contact">联系内容</section>
     

  2. 通过CSS伪类关联锚点与导航项的选中样式：

     /* 默认导航样式 */
     .nav-item {
       padding: 8px 16px;
       text-decoration: none;
       color: #333;
     }
     
     /* 锚点匹配时的选中样式 */
     #home:target ~ nav .nav-item[href="#home"],
     #about:target ~ nav .nav-item[href="#about"],
     #contact:target ~ nav .nav-item[href="#contact"] {
       background-color: #007bff;
       color: white;
     }
     

• 局限性：仅支持页面内锚点跳转场景，刷新页面后若URL无锚点会重置状态；无法适配单页应用（SPA）的动态路由。

二、JavaScript实现（含自定义选中颜色） #

1. 基础active类分配逻辑 #

给所有导航按钮绑定点击事件，点击时移除其他按钮的active类，为当前按钮添加：

<nav>
  <button class="nav-btn" data-color="#ff6b6b">首页</button>
  <button class="nav-btn" data-color="#4ecdc4">关于</button>
  <button class="nav-btn" data-color="#45b7d1">联系</button>
</nav>

const navBtns = document.querySelectorAll('.nav-btn');

navBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 清除所有按钮的active状态
    navBtns.forEach(b => b.classList.remove('active'));
    // 给当前按钮添加active类
    btn.classList.add('active');
  });
});

2. 自定义每个按钮的选中颜色 #

方案1：利用自定义属性存储颜色

通过HTML的data-color属性定义每个按钮的选中色，JS读取该属性设置样式：

.nav-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  color: #333;
  background-color: #eee;
  transition: all 0.3s;
}

.nav-btn.active {
  color: white;
}

修改JS代码添加颜色设置：

const navBtns = document.querySelectorAll('.nav-btn');

navBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    navBtns.forEach(b => {
      b.classList.remove('active');
      // 恢复默认背景色
      b.style.backgroundColor = '#eee';
    });
    btn.classList.add('active');
    // 应用自定义选中色
    btn.style.backgroundColor = btn.dataset.color;
  });
});

方案2：独立类名控制颜色

给每个按钮设置专属类名，通过CSS直接定义选中样式：

<nav>
  <button class="nav-btn home-btn">首页</button>
  <button class="nav-btn about-btn">关于</button>
  <button class="nav-btn contact-btn">联系</button>
</nav>

.nav-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  color: #333;
  background-color: #eee;
  transition: all 0.3s;
}

.home-btn.active {
  background-color: #ff6b6b;
  color: white;
}

.about-btn.active {
  background-color: #4ecdc4;
  color: white;
}

.contact-btn.active {
  background-color: #45b7d1;
  color: white;
}

JS逻辑保持不变，仅需控制active类的添加/移除即可。

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