尝试使导航栏处于活动状态-我将单个 nav_bar.jsp 文件包含到所有文件中答案

【问题标题】：Trying to make navbar active - I include my single nav_bar.jsp file to all my files尝试使导航栏处于活动状态-我将单个 nav_bar.jsp 文件包含到所有文件中
【发布时间】：2017-07-05 09:08:58
【问题描述】：

所以我有一个包含导航栏的文件：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？我不确定那是不是真的。试过了还是不行

【问题讨论】：

标签： html css twitter-bootstrap jsp navbar

【解决方案1】：

当您单击新标签时，您正在导航到一个新页面，因此更改 javascript 中的任何内容都不会做任何事情，因为将加载新页面并刷新 DOM。

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

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

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

【讨论】：