仅用HTML/CSS如何实现当前页面导航菜单的高亮样式？

我有一个导航菜单，需要给当前所在页面对应的导航项修改样式——比如在Short reference页面时，该导航项背景变为黑色。能不能不用后端逻辑实现这个需求？当前的HTML和CSS代码如下：

HTML代码 #

<div class="navigation">
            <ul>
                <li><a href="/short-reference">Short reference</a></li>
                <li><a href="/early-life">Early life</a></li>
                <li><a href="/main-page">Main page</a></li>
            </ul>
     </div>

CSS代码 #

.navigation{
    display: block;
    width: auto;
    height: 40px;
    background-color: #22438C;
    font-family: monospace;

}

.navigation ul{
    margin-left: 500px;
    list-style: none;
    
}

.navigation ul li{
    display: inline-block;
    position: relative;
    background-color: rgb(23, 23, 70);
    
}
.navigation ul li a{
    text-decoration: none;
    display: block;
    padding: 10px 12px;
    color: white;
    text-align: center;
}

解决方案 #

当然可以，推荐两种纯前端实现方式：

方法一：手动给当前页面导航项加类（最简单直接）

在每个页面的HTML里，给当前页面对应的<li>或<a>标签添加一个自定义类（比如.active），然后在CSS里给这个类设置样式。

比如在short-reference.html页面中，修改导航的HTML：

<div class="navigation">
            <ul>
                <li class="active"><a href="/short-reference">Short reference</a></li>
                <li><a href="/early-life">Early life</a></li>
                <li><a href="/main-page">Main page</a></li>
            </ul>
     </div>

然后添加CSS样式：

.navigation ul li.active {
    background-color: black;
}
/* 如果想让链接也同步样式，也可以加上 */
.navigation ul li.active a {
    color: #fff;
}

这种方法完全不需要后端或JS，适合页面数量不多的场景，维护成本低。

方法二：用JavaScript自动匹配URL（适合页面较多的场景）

如果页面数量多，手动改每个页面太麻烦，可以用JS读取当前页面的URL路径，自动给对应的导航项添加样式。

在页面末尾添加这段JS代码：

// 获取所有导航链接
const navLinks = document.querySelectorAll('.navigation ul li a');
// 获取当前页面的路径（比如 "/short-reference"）
const currentPath = window.location.pathname;

// 遍历所有链接，匹配路径
navLinks.forEach(link => {
    if (link.getAttribute('href') === currentPath) {
        // 给父元素li添加active类
        link.parentElement.classList.add('active');
    }
});

然后同样在CSS里添加.active类的样式：

.navigation ul li.active {
    background-color: black;
}

这种方法一劳永逸，不需要手动修改每个页面的HTML，纯前端就能实现自动匹配。

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