点击菜单a标签时如何单独修改对应::after伪元素背景色并重置前项

核心问题分析 #

当前代码存在两个关键问题：一是HTML中重复使用了同一个id="border"（id在DOM中必须唯一），二是未实现之前选中项的样式重置。我们可以通过添加选中状态类的方式实现切换效果，避免直接操作全局CSS变量带来的影响。

修改后的代码 #

1. HTML（修复重复id问题）

<div class="menu">
  <div class="row" style="justify-content: center;">
       <div class="menu-item">
          <a href="" class="row menu-link" onclick="change(0)">
              <span>home</span>
          </a>
       </div>

       <div class="menu-item">
          <a href="" class="row menu-link" onclick="change(1)">
              <span>subjects <i class="fa-solid fa-angle-down"></i> </span>
          </a>
       </div>

       <div class="menu-item">
          <a href="" class="row menu-link" onclick="change(2)">
              <span>expert solutions</span>
          </a>
       </div>
   </div>
</div>

2. CSS（添加选中状态样式）

:root
{
    --background-border-menu: red;
    --active-border-color: blue;
}
.menu
{
    width: 328px;
    background-color: blue;
}
.menu-item
{
    height: 70px;
    background-color: blanchedalmond;
    margin:0 5px;
}
.menu-item a
{
    position: relative;
    height: 70px;
    padding: 5px;
    font-size: 0.875rem;
    text-transform: capitalize;
    color: #2e3856;
    font-family: 'Pathway Extreme', sans-serif;
    font-weight: 600;
}

.menu-item a::after
{ 
    position: absolute;
    content: "";
    width: 100%;
    height: 0.3rem;
    background-color: var(--background-border-menu);
    bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    left: 0;
}

/* 选中状态的伪元素样式 */
.menu-item a.active::after {
    background-color: var(--active-border-color);
}

3. JS（实现选中状态切换）

function change(i)
{
    // 获取所有菜单链接
    const links = document.querySelectorAll(".menu-link");
    // 移除所有链接的选中类
    links.forEach(link => link.classList.remove("active"));
    // 给当前点击的链接添加选中类
    links[i].classList.add("active");
}

原理说明 #

• 用class="menu-link"替代重复的id，保证DOM元素选择的正确性。
• 通过.active类控制伪元素颜色：默认状态使用根变量的红色，选中时切换为蓝色。
• 每次点击先清空所有选中状态，再给当前项设置激活样式，确保始终只有一个项处于高亮状态。

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