代码之家 › 专栏 › 技术社区 › mangrove108

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

jsp-fragments spring-boot jsp

0

mangrove108 · 技术社区 · 7 年前

我目前正在一个使用 jsp 和 jstl . 我喜欢在导航栏中突出显示活动选项卡,其中使用了一个活动类 bootstrap 4 thymeleaf )获得结果,但没有使用纯jstl和jsp。我想出了这个解决方案:

${pageContext.request.requestURI.endsWith(“/…”)?“active”:“”}

但导航栏不起作用。jspf文件位于标头处。待办事项中的jspf。jsp文件。 除导航中的活动选项卡外,所有功能都正常工作 ,谢谢您的帮助。

标题。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>

导航。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>

2 回复 | 直到 7 年前

1

mangrove108 7 年前

该死,就像我想的那样。可以在控制器中为特定页面定义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>

2

1

Valix85 5 年前

尝试以下操作:

<%@ 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;}