Question

所以我有一个文件，其中包含我的导航栏：nav_bar.jsp。在这个文件中，我有这个：

<ul class="nav navbar-nav">
                <!-- navbar links -->
                <li class="active"><a href="${pageContext.request.contextPath}/index/">Home</a></li>
                <li><a href="${pageContext.request.contextPath}/myinfo/">My Information</a></li>
                <li><a href="${pageContext.request.contextPath}/reimbursements/">Reimbursements</a></li>
                <li><a href="${pageContext.request.contextPath}/employees/">Employees</a></li>
            </ul>

（我的网址有正在检查路径的正则表达式）

无论如何，我的所有文件都包含以下文件：

<%@ include file="nav_bar.jsp" %>  <%-- Bringing in nav bar  --%>

导航栏显示完美。但是，我正在尝试根据打开的选项卡更改“活动”类。我试图用JS做，但它仍然无法正常工作。我试过这个

default.js

$('.navbar-nav li').click( function () {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

注意：我在nav_bar.jsp中获取了我的JS，并且每个其他页面都将其作为head标记中的最后一个标记

<script type="text/javascript" src="${pageContext.request.contextPath}/JS/default.js"></script>

我在某处读到了我必须在body标签的底部添加JS？我不确定这是不是真的。我尝试了但它仍然无法正常工作

Answer 1

当您点击新标签页时，您正在导航到新页面，因此更改javascript中的任何内容都不会起作用，因为将加载新页面并刷新DOM。

设置活动类的一种方法是基于请求URL。你可以通过HTML标签或JavaScript来做到这一点。对于HTML标签，请执行以下操作:(您必须为每个选项卡执行此操作（根据需要为每个链接调整条件））

<li class="${pageContext.request.requestURI.endsWith('/index/') ? 'active' : ''}">
    <a href="${pageContext.request.contextPath}/index/">Home</a>
</li>

注意：我刚刚假设了第一个链接的条件。您可能希望调整它以涵盖更广泛的请求等

试图让导航栏处于活动状态 - 我将单个nav_bar.jsp文件包含在我的所有文件中

1 个答案: