1、点击菜单，经过Controller层处理，正常定位到视图页面

2、编写抽象出公共片段的html，根据参数判断是否加高亮样式

3、多个目标页面引用步骤2中抽象出的公共片段，传不同的参数

具体实现如下：

1、Controller跳转代码如下：

package com.myself.controller;

import com.myself.dao.EmployeeDao;
import com.myself.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Collection;

@Controller
public class EmployeeControlller {
    @Autowired
    private EmployeeDao employeeDao;

    @GetMapping("/emps")
    public String listEmps(Model model){
        Collection<Employee> emps = employeeDao.getAll();
        model.addAttribute("emps",emps);
        return "emp/list";
    }
}

2、抽取出的公共片段页面，主要代码如下：

<!DOCTYPE html>
<!--需要引入命名空间，否则下边无法使用th:标签-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
　　
<!--th:fragment为普通片段的显示定义-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
        <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
            </li>
        </ul>
    </nav>
　　<!--id="sidebar"为选择器的形式定义-->
    <nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
        <div class="sidebar-sticky">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="#" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                        </svg>
                        Dashboard <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <!--注意@{}里边才是请求的路径，~{}里边是引用的片段块，${}里边是取变量的值，#{}里是从配置文件取值-->
                    <a class="nav-link" href="#" th:href="@{/emps}" th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        员工管理
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</body>
</html>

3、具体需要高亮显示的页面，主要代码片段如下：

如首页主要代码如下：

<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div>
<!--引入侧边栏并高亮显示-->
            <div th:replace="~{emp/bar::#sidebar(activeUri='main.html')}"></div>

而员工管理页面主要代码为：

<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div>
<!--引入侧边栏并高亮显示-->
<div th:replace="~{emp/bar::#sidebar(activeUri='emps')}"></div>

其中引入片段可以有th:insert  ;  th:replace  ; th:include ，具体可参考thymeleaf手册

若有理解不到之处，望指正！

0015SpringBoot结合thymeleaf实现点击菜单高亮显示的更多相关文章

  1. 两种简单实现菜单高亮显示的JS类(转载)

    两种简单实现菜单高亮显示的JS类   近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...

  2. js实现当前导航菜单高亮显示

    为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...

  3. 微信公众号菜单openid 点击菜单即可打开并登录微站

    现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...

  4. 重写JS的鼠标右键点击菜单

    重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...

  5. 点击菜单选项，右侧主体区新增子界面（Tab）的实现

    今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效 ...

  6. 左侧多级菜单,高亮显示js

    左侧多级菜单,如果本页面是当前栏目,则左侧菜单高亮显示 <ul class="nav navbar-stacked" id="navs"> {ded ...

  7. jq 鼠标点击跳转页面后 改变点击菜单的样式代码

    点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...

  8. .net MVC 微信公众号 点击菜单拉取消息时的事件推送

    官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141016&token=&lang=zh_CN ...

  9. ASP.NET MVC Bootstrap模板选中菜单高亮显示当前项方法

    当我们处理后台显示当前页面,当前页菜单项高亮,我们可以使用js方法,也可用程序实现,使用Bootstrap模板处理高亮并展开方法之一 1.在项目中导入 <script src="/as ...

随机推荐

  1. LeetCode 230. 二叉搜索树中第K小的元素(Kth Smallest Element in a BST)

    230. 二叉搜索树中第K小的元素 230. Kth Smallest Element in a BST 题目描述 给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的 ...

  2. 031 Android 异步任务(AsyncTask)

    1.介绍 AsyncTask(了解即可),重点掌握Handler+Thread 2.实现方法 3.执行步骤 4.java后台 package com.lucky.test36asynctask; im ...

  3. [Xamarin] - 连接 Mac Agent 显示 "couldn't connect to xxxx, please try again" 之解决

    背景 在 VS 2017 的 Xamarin 项目中,配置 Mac Agent 连接到本地虚拟机中的 MacOS 失败. 1. MacOS 已启用远程登陆.2. SSH 可以登陆成功.3. 防火墙已关 ...

  4. 《Mysql - 读写分离有哪些坑？》

    一:读写分离 - 概念 -  读写分离的主要目标就是分摊主库的压力. - 基本架构 -     -  二:两种读写分离的架构特点 - 客户端直连方案 - 因为少了一层 proxy 转发,所以查询性能稍 ...

  5. Java基础---Java 数组

    数组概念: 数组就是存储数据长度固定的容器,保证多个数据的数据类型要一致. 数组的定义 格式:数组定义格式详解: 数组存储的数据类型: 创建的数组容器可以存储什么数据类型. [] : 表示数组. 数组 ...

  6. STL源码剖析——空间配置器Allocator#3 自由链表与内存池

    上节在学习第二级配置器时了解了第二级配置器通过内存池与自由链表来处理小区块内存的申请.但只是对其概念进行点到为止的认识,并未深入探究.这节就来学习一下自由链表的填充和内存池的内存分配机制. refil ...

  7. deepin linux 打开ssh服务

    首先,更新一下软件源,打开"终端窗口",输入"sudo apt-get update"-->回车-->" 输入当前登录用户的管理员密码&q ...

  8. 从零开始学Flask框架-004

    Flask-Moment pip install flask-moment 除了moment.js,Flask-Moment 还依赖jquery.js.但是Bootstrap 已经引入了jquery. ...

  9. Python socket 编程（1）

    服务端的创建: import socket server = socket.socket() # 创建一个socke对象 server.bind(('192.168.101.5', 8001)) # ...

  10. VNC的使用

    1. 安装 rpm -ivh tigervnc-server--.el6.x86_64.rpm 如果rpm安装时发现有依赖,建议直接使用yum安装,轻松解决依赖问题: yum install tige ...