求助：实现页面切换时导航栏当前选项高亮显示

问题分析 #

你当前的代码中，active类是硬编码在index.html的Home链接上，其他页面（比如news.html）的导航栏里对应链接没有这个类，因此切换页面后无法自动高亮。另外你的HTML代码里存在多余的闭合标签（</div>和</label>），建议先修正，避免DOM结构异常。

解决方案 #

方案一：JavaScript自动匹配（通用型） #

添加一段JS代码，自动根据当前页面URL匹配导航栏链接并添加active类，无需手动修改每个页面的导航栏：

// 导航栏高亮逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 获取当前页面的文件名（比如 index.html、news.html）
    const currentPage = window.location.pathname.split('/').pop();
    // 获取所有导航栏链接
    const navLinks = document.querySelectorAll('nav ul li a');
    
    navLinks.forEach(link => {
        // 获取链接的目标文件名
        const linkPage = link.getAttribute('href');
        // 匹配当前页面与链接目标
        if (linkPage === currentPage) {
            // 移除所有链接的active类
            navLinks.forEach(l => l.classList.remove('active'));
            // 给当前页面对应的链接添加active类
            link.classList.add('active');
        }
    });
});

把这段代码添加到你现有的<script>标签中，或者放到nav.js文件里（确保nav.js在DOM加载完成后执行）。

方案二：手动添加active类（适合页面数量少的情况） #

如果你的页面数量不多，可以直接在每个页面的导航栏中，给对应页面的链接加上active类：

• 在news.html中，修改News的链接：

  <li><a href="nav.html" class="active text">News</a></li>
  

• 在j-koders.html中，修改J-Koder的链接：

  <li><a href="j-koders.html" class="active text">J-Koder</a></li>
  

以此类推，每个页面只需要给对应导航项添加active类即可。

额外注意事项 #

• 修正你HTML中多余的闭合标签：原代码里<nav>开头有</div>和</label>，这会导致DOM结构错误，建议删除这些无效标签。
• 确保你的CSS中.active样式优先级正确，目前你的CSS里a.active,a:hover的样式是有效的，无需修改。

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