如何实现导航栏元素处于active状态时修改背景颜色？

核心问题在于：点击导航链接跳转到新页面后，页面会重新加载，之前通过点击事件添加的active类会丢失。正确的做法是在页面加载完成时，根据当前页面的URL匹配对应的导航项，为其添加active类。

步骤1：修正HTML结构错误 #

原HTML中<nav>标签位于<body>外部，不符合HTML规范，先调整结构：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="website.js"></script>
        <link rel="stylesheet" type="text/css" href="css.css" />
        <title> Why So Serious </title>
    </head>
    <body>
        <header>
            <h1><span> Why So Serious</span></h1>
        </header>
        <!-- 将nav移入body内部 -->
        <nav class="navbar">
            <ul>
                <li><a href="goodnews.html">Goodnews</a></li>
                <li><a href="sport.html">Sport</a></li>
                <li><a href="style.html">Style</a></li>
                <li><a href="forum.html">Forum</a></li>
            </ul>
        </nav>
    </body>
</html>

步骤2：原生JavaScript解决方案 #

在website.js中添加以下代码，页面加载时自动匹配当前URL对应的导航项：

// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 获取当前页面的文件名（如 "goodnews.html"）
    const currentPage = window.location.pathname.split('/').pop();
    
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('.navbar ul li a');
    
    // 遍历链接，匹配当前页面
    navLinks.forEach(link => {
        const linkPage = link.getAttribute('href');
        if (linkPage === currentPage) {
            // 先移除所有导航项的active类
            document.querySelectorAll('.navbar .active').forEach(el => el.classList.remove('active'));
            // 给当前匹配的链接添加active类
            link.classList.add('active');
        }
    });
});

步骤3：确认CSS样式匹配 #

你的CSS中.navbar .active已定义active状态的样式，当前逻辑是给<a>标签添加active类，与现有CSS选择器完全匹配，无需修改样式代码。

备选jQuery方案 #

如果项目依赖jQuery，可使用以下代码替代原生JS：

$(document).ready(function() {
    const currentPage = window.location.pathname.split('/').pop();
    $('.navbar ul li a').each(function() {
        const linkPage = $(this).attr('href');
        if (linkPage === currentPage) {
            $('.navbar .active').removeClass('active');
            $(this).addClass('active');
        }
    });
});

关键说明 #

• 原方案失效原因：之前的JS仅在点击时临时添加active类，但页面跳转后新页面的JS环境重置，状态无法保留，必须在新页面加载时重新判断匹配。
• 适配带参数的URL：如果页面URL包含参数（如goodnews.html?id=1），可将匹配逻辑改为linkPage === currentPage.split('?')[0]，忽略参数部分。

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