thymeleaf代码片段点击导航高亮

最新推荐文章于 2022-01-06 16:06:45 发布
最新推荐文章于 2022-01-06 16:06:45 发布
阅读量384 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjymym/article/details/116749613
版权

引用了代码片段，点击某个导航的时候需要高亮显示

公共页面：

<li class="layui-nav-item" th:class="${layuiThis=='osUI/index'? 'layui-nav-item layui-this':'layui-nav-item'}">
   <a href="/osUI/index" th:href="@{/osUI/index}">首页</a>
</li>

th:class="${layuiThis=='osUI/index'? 'layui-nav-item layui-this':'layui-nav-item'}"
这一句判断layuiThis参数的值是否等于osUI/index ，满足条件后给class添加上layui-nav-item layui-this
不满足就只是添加layui-nav-item

引入公共页面的页面

<div th:replace="osUI/common::header(layuiThis='osUI/index')"></div>

在（）传参
在这里插入图片描述

在这里插入图片描述

3的奇迹
关注
专栏目录
thymeleaf仿vue动态调用高级用法，实现thymeleaf片段模板调用，动态加载
lengRuShuang116的博客
08-19 2512
首先这是基于一个需求，我们的项目后台用的springboot，前端用的layui，当时有一个需求是，在一个页面展示出一个任务当前任务的办理进度，就是很多个栅格的这种，而且要根据流程节点动态的展现，最终在项目经理的指导下，采用了thymeleafd的片段化调用的方式； 首先需要经过一个controller跳转到我的页面可以称作我最终显示的详情页面 跳转到详情页的控制器 @RequestMapping...
多种左侧树形菜单导航
04-22
左侧树形菜单导航大全,提供多种左侧树形实例
使用Thymeleaf设置导航栏选中后高亮
debugtoday的博客
01-06 955
1、首先引入JS，用#thisNav接收后台标记的字段，获取该页面的id，根据class="a-first"取到需高亮导航的id(此id需要根据后台字段获取th:data-id="${nav.id}")，逻辑：若该页面id与选中的导航id一致thisValue == item.dataset.id，则在class="a-first"这个class中追加一个selected样式 window.onload = function(){ var thisValue = document.querySe
（thymeleaf）common侧边栏高亮
weixin_47438730的博客
06-29 310
1.设置组件判断 2.调用common组件时传递参数
thymeleaf实现公共元素的抽取，点击菜单栏高亮显示（全）
pshdhx的博客
11-29 5691
1、抽取公共片段 <div th:fragment="copy"> &copy; 2011 The Good Thymes Virtual Grocery </div> 2、引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}：模板名::选择器 ~{templatename::fragmentname}:模板名::片段名 3、默认效果： insert的.
thymeleaf在引入片段的时候加入参数，使菜单动态高亮
weixin_40404189的博客
03-27 1481
1、为了管理起来方便，我们把所有公共片段全部放入一个HTML文件中。 有两种方式引入 方法一：在源片段中添加 th:fragment=“片段名” <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"> <a class="navbar-brand...
springboot2.7.15+thymeleaf 代码
最新发布
09-21
SpringBoot 2.7.15 与 Thymeleaf 的整合是现代Java Web开发中的常见实践，...同时，对于文件列表"sm03"的具体内容，由于没有详细信息，可能是项目的源代码、资源文件或其他相关文档，需要实际解压查看以获取更多信息。
springboot2.1.7整合thymeleaf代码实例
08-25
Spring Boot 2.1.7 整合 Thymeleaf 代码实例详解 在本文中，我们将详细介绍如何将 Thymeleaf 整合到 Spring Boot 2.1.7 中，包括添加依赖项、配置 application.properties 文件和使用 Thymeleaf 模板引擎。通过本文...
HTML5模板引擎 Thymeleaf源代码
03-15
Thymeleaf是一个Java库。这是个XML/XHTML/HTML5模板引擎，提供一组模板文件到文本的转换。Thymeleaf更适应在web应用中提供XHTML/HTML5的服务，但也可以在web或任何的独立应用中处理任何的XML文件。也包括一个特定可...
spring boot使用thymeleaf跳转页面实例代码
08-30
在上述代码中，`@RequestMapping`注解定义了处理的URL路径，而`return`语句中的字符串则指定了Thymeleaf模板文件的名称。当控制器方法执行完毕后，Spring Boot会自动寻找与返回字符串相对应的模板文件并渲染，最后...
SpringBoot基础--（实验）员工列表和thymeleaf公共页面元素抽取以及实现高亮效果
qq_44660367的博客
07-23 373
实验的请求架构; 实验功能 请求URI 请求方式 查询所有员工 emps GET 查询某个员工(来到修改页面) emp/1 GET 来到添加页面 emp GET 添加员工 emp POST 来到修改页面（查出员工进行信息回显） emp/1 GET 修改员工 emp PUT 删除员工 emp/1 DELETE 员工列表 1、在dashboard.html 文件中将Customer项得超链接改为themleaf渲染 <a class="nav-link" th:
thymeleaf公共页面元素抽取和高亮显示
鲸鱼姐的专栏
05-15 1758
一 thymeleaf公共页面元素抽取 1、抽取公共片段，在公共页面footer.html的片段上加上th:fragment属性 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2、引入公共片段， <div th:insert="~{footer :: copy...
thymeleaf导航栏---公共页面元素抽取
鲸鱼姐的专栏
05-24 4551
1.public.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <bo...
一篇文章解决springboot+thymeleaf多语言国际化
caiycx的博客
07-17 3万+
1.前言 博主最近在写一个多语言的项目，因为之前没实际接触过多语言的设计，所以写这篇文章记录下这次多语言开发的过程。 博主的开发环境是：Springboot1.5.6 + thymeleaf，需要注意的是，springboot 1.x和2.x有比较大的差别。 文章实现的主要功能： springboot+thymeleaf最基本的国际化配置 自定义配置国际化，区域解析器 读取多个分类的国际化文件； 后台设置前端页面显示国际化信息的文件 利用拦截器和注解自动设置前端页面显示国际化信息的文件
使用Thymeleaf模板封装页面公有部分（CSS，JS，导航栏等）
YINLINNEVERG的博客
06-01 1万+
简述 一般来说，一个网站的各个网页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页面使用。 要实现该功能，可以使用Thymeleaf模板的 th:replace、th:include或th:insert属性，借助th:fragment属性来实现。 属性 特点 th:replace 不保留自己的主标签，保留th:fragment的主...
使用thymeleaf时遇到的一些问题
萧逸才的博客
05-29 2万+
最近一直在使用spring boot，所以自然而然的使用了thymeleaf，但是我想说习惯了jsp之后使用thymeleaf真实觉得不顺手，在使用thymeleaf中也遇到了一些问题，在这里记录一下，应该还是挺有用的，呵呵……问题一:org.xml.sax.SAXParseException: 元素类型 “input” 必须由匹配的结束标记 “” 终止。 这是最简单的一个问题，用过的，都知道，
Thymeleaf实现一张页面中引入另一张HTML文件
SHUKAI618的博客
12-26 4734
最近在修改网站页面的时候，发现页面代码有很多重复的地方，有很多地方需要优化。由于项目采用的是springboot框架+Thymeleaf前端模板引擎，这次主要优化的地方是页面头文件，导航栏和页脚。 做一些公共文件，实现和freemark的include标签一样的功能。 1.新建所需的公共HTML文件（子页面），如header or footer: &lt;!DOCTYPE html&gt; &l...
实现左侧导航栏点击，右侧显示对应页面的布局
热门推荐
engineer_hzl
01-19 5万+
简单介绍下面js代码的意思： $(function() { var height=document.documentElement.clientHeight; document.getElementById('iframe-page-content').style.height=height+'px'; }); var menuClick = function(menuUrl) { $("#ifr
thymeleaf高级使用
Antg的博客
08-27 1432
一.th:onclick 语法: 如果需要使用th:onclick,这个时候我们需要把代码用||包裹起来，之后在||里面就可以添加表达式了如${}，或者@{}。 <button class="layui-btn" th:onclick="|xadmin.open('添加用户','@{/user/add}',600,400)|"> 添加 </button> 注意: 如果需要传参是数值或者布尔类型,可以直接写,其他类型需要使用data-变量名的方式来传值,主要是为了防止脚本注入 例
thymeleaf 的代码片段
05-26
以下是一个基本的 Thymeleaf 代码片段，它将一个列表中的元素显示为一个 HTML 表格： ```html <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr th:each="person : ${people}"> <td th:text="${person.id}">1</td> <td th:text="${person.name}">John Doe</td> <td th:text="${person.age}">30</td> </tr> </tbody> </table> ``` 在这个例子中，Thymeleaf 使用 `th:each` 对 `people` 列表进行迭代，并为每个列表项生成一个表格行。在表格行中，`th:text` 指令用于将 `person` 对象的属性值显示为单元格的文本内容。如果 `person` 对象中没有相应的属性，则默认值将为指令中的文本。 注意，在使用 Thymeleaf 时，需要在 HTML 文件的开头添加一个命名空间声明，如下所示： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> ... </html> ``` 这将允许你在 HTML 中使用 Thymeleaf 的指令和表达式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值