0

我目前正在使用jsp 和jstl的网站上工作。我喜欢在导航栏中突出显示带有在引导程序 4中使用的活动类的活动选项卡，根据当前页面，我找到了很多方法 ( thymeleaf ) 来获得结果，但没有纯 jstl 和 jsp 的方法。我想出了这个解决方案：

${ pageContext.request.requestURI.endsWith(' /... ') ？'积极的' ： ” ” }

但它不起作用，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>

所有包括待办事项文件如下所示：

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

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

2 回答 2

1

该死的，正如我所料。它可以在控制器中为特定页面定义一个 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";
  }
}

像这样的导航栏：

<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>
于 2018-02-20T17:16:04.210 回答
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;}
于 2019-08-01T15:33:58.257 回答