Question

我目前正在使用jsp的网站和jstl。我想在导航栏中突出显示bootstrap 4中使用的活动类的活动选项卡，根据当前页面，我找到了很多方法（thymeleaf）来获得结果，但没有一个用纯jstl和JSP。我提出了这个解决方案：

$ {pageContext.request.requestURI.endsWith（'/ ...'）？ 'active'：“”}

但它不起作用，navbar.jspf文件位于todo.jsp文件中的header.jspf。 除了导航中的有效标签外，其他所有功能都有效，谢谢您的帮助。

header.jspf如下所示：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Add Todo</title>
  <link rel="stylesheet"href="webjars/bootstrap/4.0.0/css/bootstrap.min.css"/>
</head>
<body>

navigation.jspf如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-light border mb-5">
  <a class="navbar-brand p-2" href="#">Navbar</a>

  <button class="navbar-toggler m-2" type="button" data-
      toggle="collapse" data-target="#navbarSupportedContent" aria-
      controls="navbarSupportedContent" aria-expanded="false" aria-
      label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item 
        ${pageContext.request.requestURI.endsWith('/') ? 'active' : 
        ''}">
        <a class="nav-link p-3 " href="/login">Home</span></a>
      </li>
      <li class="nav-item 
          ${pageContext.request.requestURI.endsWith('/list-todos') ? 
          'active' : 
          ''}">
        <a class="nav-link p-3 " href="/list-todos">Todos</a>
      </li>
   </div>
</nav>

所有包含todo文件如下所示：

  <%@ include file="fragments/header.jspf" %>
  <%@ include file="fragments/navigation.jspf" %>

  <div class="container">
    <h2>Add Todo Page for ${name}</h2>
    ...........
  </div>

Answer 1

尝试一下：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="pagina" value="${requestScope['javax.servlet.forward.request_uri']}" />

和您的HTML

<ul class="navbar-nav ml-auto">
                <li class="nav-item ${pagina.endsWith('/') ? 'active' : ''} ${pagina.endsWith('/index') ? 'active' : ''}">
                    <a class="nav-link" href="${ctx}/">Home</a>
                </li>
                <li class="nav-item ${pagina.endsWith('/menu') ? 'active' : ''}">
                    <a class="nav-link" href="${ctx}/menu">Menu</a>
                </li>
                <li class="nav-item ${pagina.endsWith('/servizi') ? 'active' : ''}">
                    <a class="nav-link" href="${ctx}/servizi">Servizi</a>
                </li>
<!-- ... more items -->
</ul>

以及您的CSS

nav li.active a {color: red; font-weight:bold;}

Answer 2

像我想的那样。它可以在控制器中为特定页面定义modelAttribute。和导航栏中的jsp变量。

就我而言：

@Controller
@SessionAttributes("name")
public class LoginController {

  @Autowired
  LoginService service;

  @RequestMapping(value="/login", method = RequestMethod.GET)
  public String showLoginPage(ModelMap model){
    model.addAttribute("activeLogin", "active");
    return "login";
  }
}

Navbar是这样的：

<nav class="navbar navbar-expand-lg navbar-light border-bottom mb-5">
  <a class="navbar-brand p-2" href="#">Navbar</a>
  <button class="navbar-toggler m-2" type="button" data-
   toggle="collapse" data-target="#navbarSupportedContent" aria-
   controls="navbarSupportedContent" aria-expanded="false" aria-
   label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item ${activeLogin}">
       <a class="nav-link p-3 " href="/login">Home</span></a>
     </li>
     .........
   </ul>
  </div>
</nav>

突出显示活动菜单项，根据当前页面使用jsp / jstl，没有javascript

2 个答案: