如何根据当前活动页高亮带::after伪元素的导航菜单项

嘿，这个问题我之前也碰到过——伪元素不属于DOM节点，所以确实没法用jQuery的addClass直接给它加样式，但咱们换个思路就搞定了，核心是给父元素加类，让CSS通过父类来控制伪元素的显示。

步骤1：修改CSS，添加活动状态的伪元素样式 #

首先，你需要在现有hover样式的基础上，给导航项的活动类（比如.active）也写一套完全一致的::after样式。这样当父元素有.active类时，伪元素就会和hover时一样显示。

假设你的原CSS是这样的：

.nav-item:hover::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2c3e50;
  transition: all 0.3s ease;
}

那你只需要新增一段针对.active类的样式：

/* 和hover效果完全一致的活动状态伪元素样式 */
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2c3e50;
  transition: all 0.3s ease;
}

步骤2：用jQuery给当前活动页的导航项添加.active类 #

接下来，你需要判断哪个导航项对应当前页面，然后给它的父元素（也就是.nav-item）加上.active类。这里可以通过匹配当前页面的URL和导航链接的href来实现：

// 获取当前页面的路径（比如 "/about.html"）
var currentUrl = window.location.pathname;

// 遍历所有导航项的链接
$('.nav-item a').each(function() {
  var linkUrl = $(this).attr('href');
  
  // 匹配逻辑：如果当前URL包含导航链接的路径（根据你的实际URL结构调整）
  // 注意：如果是根路径 "/"，可以单独处理避免误匹配
  if (currentUrl === linkUrl || (currentUrl !== '/' && currentUrl.includes(linkUrl))) {
    // 给父元素添加.active类
    $(this).closest('.nav-item').addClass('active');
  }
});

额外注意事项 #

• 如果是单页应用（比如Vue/React），你需要监听路由变化事件，在路由切换时重新执行上面的JS逻辑来更新.active类。
• 确保你的导航项结构是类似<li class="nav-item"><a href="/about">About</a></li>这样的，这样closest('.nav-item')才能正确找到父元素。
• 要是担心样式重复，可以用CSS变量来统一控制伪元素的样式，比如：

  :root {
    --nav-underline-color: #2c3e50;
    --nav-underline-height: 2px;
    --nav-underline-bottom: -3px;
  }
  
  .nav-item:hover::after,
  .nav-item.active::after {
    content: '';
    position: absolute;
    bottom: var(--nav-underline-bottom);
    left: 0;
    width: 100%;
    height: var(--nav-underline-height);
    background-color: var(--nav-underline-color);
    transition: all 0.3s ease;
  }
  

  这样后续修改样式只需要改变量，不用重复写两遍代码~

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