如何实现Navbar根据当前访问页面显示下划线效果（如示例图所示）？

嘿，这个需求我帮不少开发者处理过，其实分几种场景来实现就很简单，我给你拆解一下靠谱的方案：

如果你的项目是纯静态HTML页面，最直接的方式就是手动给当前页面的导航项加一个标记类，比如active，然后用CSS实现下划线效果。

示例代码： #

HTML（首页 index.html）

<nav class="navbar">
  <a href="/" class="nav-link active">首页</a>
  <a href="/about.html" class="nav-link">关于我们</a>
  <a href="/blog.html" class="nav-link">博客</a>
</nav>

HTML（关于页 about.html）

<nav class="navbar">
  <a href="/" class="nav-link">首页</a>
  <a href="/about.html" class="nav-link active">关于我们</a>
  <a href="/blog.html" class="nav-link">博客</a>
</nav>

CSS 下划线样式

/* 基础导航链接样式 */
.nav-link {
  text-decoration: none;
  color: #333;
  padding: 0.6rem 1.2rem;
  position: relative;
  font-size: 1rem;
}

/* 当前页面链接的下划线效果 */
.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -2px; /* 调整下划线和文字的间距 */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2563eb; /* 自定义下划线颜色 */
  border-radius: 1px; /* 可选：让下划线边角圆润 */
}

如果页面太多，手动加active类太麻烦，可以用JavaScript自动匹配当前URL来添加类：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const currentPath = window.location.pathname;
  const navLinks = document.querySelectorAll('.nav-link');

  navLinks.forEach(link => {
    // 获取链接的绝对路径，避免相对路径匹配问题
    const linkPath = new URL(link.href).pathname;
    // 精确匹配路径
    if (linkPath === currentPath) {
      link.classList.add('active');
    }
  });
});

如果用的是现代前端框架，路由库一般都自带了当前页面导航项的标记功能，不用自己写JS判断。

React + React Router #

用NavLink组件，它会自动给匹配的链接添加active类：

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav className="navbar">
      <NavLink
        to="/"
        className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
        end // 加上end确保精确匹配根路径，避免子路由误触发
      >
        首页
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
      >
        关于我们
      </NavLink>
    </nav>
  );
}

Vue + Vue Router #

用router-link组件，它会自动添加router-link-active类：

<template>
  <nav class="navbar">
    <router-link to="/" class="nav-link" exact>首页</router-link>
    <router-link to="/about" class="nav-link">关于我们</router-link>
  </nav>
</template>

<style scoped>
.nav-link.router-link-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2563eb;
}
</style>

如果想要更丝滑的视觉体验，可以给下划线加过渡动画，比如从中间展开的效果：

.nav-link {
  /* 基础样式不变，加上过渡 */
  transition: all 0.3s ease;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #2563eb;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav-link.active::after {
  width: 100%;
}

这样就能实现和示例图一致的当前页面导航项下划线效果啦，根据你的项目类型选对应的方案就行~

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