包含一个 HTML 菜单，其中突出显示了正确的菜单项

Question

我有一些 JSP 页面，我想在其中包含一个 HTML 菜单（仅供参考：正在使用 Bootstrap）。

我想要包含的菜单由三个项目组成，其代码如下所示。我想将它包含在 jsp 页面 page1.jsp、page2.jsp 和 page3.jsp 中。如您所见，在此示例中第 1 页被突出显示（设置为活动）。

如何使其动态化，以便根据使用的 jsp 页面突出显示正确的菜单项？

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
</ul>

Answer 1

使用小脚本

您应该将实际页面存储到页面开头的变量中，例如

<% String page = pageContext.getAttribute("page"); %>

那么你可以这样做：

<li class="<% page.equals("page1") ? "active" : "" %>">Page 1</li>
<li class="<% page.equals("page2") ? "active" : "" %>">Page 2</li>
<li class="<% page.equals("page3") ? "active" : "" %>">Page 3</li>

然而，在现代应用程序中使用 scriptlet 并不是很可取，您可以使用例如JSTL 模板制作动态页面。

使用 JSTL 模板

首先我们导入核心的 JSTL 标签库：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

这里我们将page变量设置为page变量（这来自一个bean）：

<c:set var="page" scope="session" value="${page}"/>

最后我们为变量做一个条件：

<c:choose>
    <c:when test="${page eq "page1"}">
        <li class="active"><a href="#">Page 1</a></li>
    </c:when>
    <c:otherwise>
        <li><a href="#">Page 1</a></li>
    </c:otherwise>
</c:choose>

如果你想这样做，我实际上并不推荐这种方法，因为它可以更简洁地表达，但是我自己并不广泛地了解 JSTL。

一种更短但更脏的方法（我没有测试过）：

<li class="<c:if test="${page eq "page1"}">active</c:if>">
    <a href="#">Page 1</a>
</li>