HTML中实现点击侧边栏标签切换选中项高亮颜色的方法

需求说明 #

已实现侧边栏菜单项鼠标悬停变色的:hover效果，需要补充点击交互：点击任意菜单项后，该项永久保持选中色，其余菜单项恢复默认初始颜色。

现有代码 #

原有CSS #

.wrapper {
  display: flex;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%
}

.wrapper .sidebar {
  width: 220px;
  height: 100%;
  background: #4b4276;
  padding: 30px 0px;
  position: fixed;
  font-size: 15px;
  display: block;
  height: 100%;
  flex-shrink: 0;
}

.wrapper .sidebar h2 {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
  font-family: Helvetica;
}

.wrapper .sidebar ul li {
  padding: 15px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wrapper .sidebar ul li a {
  color: #bdb8d7;
  display: block;
}

.wrapper .sidebar ul li a .fas {
  width: 25px;
}

.wrapper .sidebar ul li:hover {
  background-color: #594f8d;
}

.wrapper .sidebar ul li:hover a {
  color: #fff;
}

.wrapper .main_content {
  margin-left: 220px;
  width: calc(100% - 200px);
  display: block;
}

原有HTML #

<div class="wrapper">
  <div class="sidebar">
    <h2 style="font-family: Verdana;"> Dashboard</h2>
    <ul>
      <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
      <li><a href="page1.php"><i class="fa fa-paper-plane"></i> Page 1</a></li>
      <li><a href="page2.php"><i class="fa fa-mobile"></i> Page 2</a></li>
      <li><a href="page3.php"><i class="fa fa-phone"></i>Page 3</a></li>
      <li><a href="page4.php"><i class="fa fa-plug"></i> Page 4</a></li>
      <li><a href="page5.php"><i class="fa fa-user"></i> Page 5</a></li>
    </ul>
  </div>
</div>

具体实现步骤 #

纯CSS无法实现跨元素的点击状态持久切换，需要配合类名控制实现，分两步操作：

1. 追加选中态样式
   在原有CSS代码末尾追加选中类的样式，和现有hover效果保持一致即可，也可以自定义选中色：

   /* 选中态样式 */
   .wrapper .sidebar ul li.active {
     background-color: #594f8d;
   }
   .wrapper .sidebar ul li.active a {
     color: #fff;
   }
   

2. 根据业务场景选择状态切换逻辑
   • 如果是单页无刷新切换内容的场景：
     加一段原生JS控制类名切换即可，逻辑是点击菜单项时，先清除所有菜单项的active类，再给当前点击项加上active类。代码放在页面</body>标签前即可：

     const menuItems = document.querySelectorAll('.wrapper .sidebar ul li');
     menuItems.forEach(item => {
       item.addEventListener('click', function(e) {
         // 单页切换不需要跳转时解开下面这行注释
         // e.preventDefault();
         // 清除所有选中态
         menuItems.forEach(li => li.classList.remove('active'));
         // 给当前项加选中态
         this.classList.add('active');
       })
     })
     

     如果需要刷新页面后保留选中状态，可以把当前选中项的标识存在localStorage，页面加载时读取标识给对应项加active类即可。
   • 如果是多页跳转的场景（即现有代码里点击跳转到page1.php这类独立页面的情况）：
     不需要额外写JS，直接在每个php页面渲染侧边栏模板时，给当前页面对应的菜单项加上active类即可。比如在page1.php中给Page1对应的li标签加class="active"，page2.php中给Page2对应的li标签加active类，这种方案最稳定，不会出现页面加载后选中态闪烁的问题。

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