Java EE项目中实现Bootstrap导航栏Active类动态切换求助

嘿，作为Java EE新手碰到这个导航栏active类自动切换的问题太常见了！我给你准备了两种靠谱的解决方案，你可以根据项目情况选：

Java EE项目大多是服务端渲染页面（比如JSP、Facelets），这种场景下直接在服务器端判断当前请求路径，给对应导航项加上active类是最稳妥的，完全不会有前端JS的各种坑。

举个JSP的例子，用JSTL会比脚本更优雅：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<ul class="nav navbar-nav navbar-right">
    <li class="${pageContext.request.requestURI.contains('/signup.do') ? 'active' : ''}">
        <a href="/signup.do"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
    </li>
    <li class="${pageContext.request.requestURI.contains('/login.do') ? 'active' : ''}">
        <a href="/login.do"> <span class="glyphicon glyphicon-log-in"> </span> Login</a>
    </li>
</ul>

如果不想用JSTL，用原生JSP脚本也能实现：

<ul class="nav navbar-nav navbar-right">
    <li <%= request.getRequestURI().contains("/signup.do") ? "class='active'" : "" %>>
        <a href="/signup.do"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
    </li>
    <li <%= request.getRequestURI().contains("/login.do") ? "class='active'" : "" %>>
        <a href="/login.do"> <span class="glyphicon glyphicon-log-in"> </span> Login</a>
    </li>
</ul>

原理很简单：服务器渲染页面时，会自动判断当前请求的URI是否匹配导航项的路径，匹配上就给对应的<li>加上active类，页面加载完成就是正确的状态，根本不用依赖前端JS。

如果你还是想用JS实现，之前没生效大概率是JS执行时机不对或者路径判断逻辑有问题。试试下面的代码：

// 等DOM完全加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    // 获取所有导航栏的链接
    const navLinks = document.querySelectorAll('.nav.navbar-nav a');

    navLinks.forEach(link => {
        const linkPath = link.getAttribute('href');
        // 跳过href="#"的链接（比如你原来的Sign Up），匹配实际路径的项
        if (linkPath !== '#' && currentPath.includes(linkPath)) {
            // 先移除所有导航项的active类
            document.querySelectorAll('.nav.navbar-nav li').forEach(li => li.classList.remove('active'));
            // 给当前链接的父元素<li>加上active类
            link.parentElement.classList.add('active');
        }
    });
});

注意这几个关键点：

• 一定要用DOMContentLoaded包裹代码，或者把JS放在页面最底部，不然DOM还没加载完就执行会找不到元素
• 处理好href="#"的链接，避免误匹配
• 路径判断用window.location.pathname，它会返回当前页面的路径（比如/login.do），和你的导航链接路径匹配更准确

小总结 #

如果是Java EE项目，优先选服务器端方案，因为服务端渲染的场景下，服务器控制状态比前端JS更可靠，不会有各种加载时机、路径匹配的问题。

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