导航点击后无法保持高亮状态的技术求助

你遇到的核心问题是页面刷新导致JS动态添加的类丢失——点击<a>标签后浏览器会加载新页面，之前通过JS给元素加的active类会随着页面刷新全部重置，所以高亮状态没法保留。而加event.preventDefault()会阻止页面跳转，类自然能留住，但链接也失去了跳转功能。

因为你无法修改HTML结构给<li>加类，正确的做法是在页面加载完成后，根据当前页面的URL自动匹配对应的导航链接，给它加上active类，而非仅在点击时临时添加。

修正后的完整代码 #

<style>
.nav.navbar-nav li a.active{
    background: red !important;
}
</style>

<script>
$(document).ready(function(){
    // 页面加载时：根据当前URL匹配导航链接，自动添加高亮类
    var currentUrl = window.location.pathname; // 获取当前页面路径，例如 "/about.html"
    $('.nav.navbar-nav li a').each(function(){
        // 对比当前链接的href与页面路径
        if($(this).attr('href') === currentUrl){
            $(this).addClass('active');
        }
    });

    // 点击导航时：临时添加高亮，优化用户体验（无需等待页面刷新）
    $('.nav.navbar-nav li a').click(function(){
        $('.nav.navbar-nav li a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>

关键细节说明 #

1. 页面加载时的匹配逻辑：这是保留高亮的核心——每次页面刷新后，JS会自动定位到与当前URL匹配的导航链接，给它加上active类，确保页面加载完成后高亮状态直接生效。
2. 点击时的临时高亮：点击后立刻给当前链接加高亮，避免页面刷新间隙出现无高亮的空白期，提升交互体验。
3. URL匹配兼容处理：
   • 如果导航用的是完整URL（如https://example.com/about.html），把window.location.pathname换成window.location.href即可。
   • 如果URL带参数（如/page?id=1），可以用window.location.href.split('?')[0]去掉参数后再对比。
   • 遇到大小写不匹配的情况，统一转成小写对比：$(this).attr('href').toLowerCase() === currentUrl.toLowerCase()

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