thymeleaf代码片段点击导航高亮

最新推荐文章于 2022-05-05 23:22:54 发布

3的奇迹

最新推荐文章于 2022-05-05 23:22:54 发布

阅读量382

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/cjymym/article/details/116749613

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

公共页面：

<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>

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

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

3的奇迹

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

thymeleaf仿vue动态调用高级用法，实现thymeleaf片段模板调用，动态加载

lengRuShuang116的博客

08-19

2510

首先这是基于一个需求，我们的项目后台用的springboot，前端用的layui，当时有一个需求是，在一个页面展示出一个任务当前任务的办理进度，就是很多个栅格的这种，而且要根据流程节点动态的展现，最终在项目经理的指导下，采用了thymeleafd的片段化调用的方式；首先需要经过一个controller跳转到我的页面可以称作我最终显示的详情页面跳转到详情页的控制器 @RequestMapping...

多种左侧树形菜单导航

04-22

左侧树形菜单导航大全,提供多种左侧树形实例

参与评论您还未登录，请先登录后发表或查看评论

使用Thymeleaf设置导航栏选中后高亮

debugtoday的博客

01-06

953

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

5690

1、抽取公共片段 <div th:fragment="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

1480

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

1757

thymeleaf示例

m0_45209551的博客

05-05

1128

1.组件封装 th:fragment="topbar" 2.组件使用并携带数据 <div th:insert="~{commons/commons::sidebar(active='list.html')}"></div> 3.导航选中高亮，通过步骤2 <a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}"> 4.表单展示数.

Spring-Boot+Solr搜索应用（索引数据创建+关键字高亮+thymeleaf静态html模板渲染跳转）

Appleyk的专栏

02-07

1万+

先来看一下效果，三张图 A. Solr服务中，按条件查询商品名称为Mac开头的所有办公电脑----> q,item_name:Mac* fq === filer query 过滤查询，相当于 sql语句的 where（根据指定条件查询） sort ：根据哪个字段进行排序 start，rows ：分页 fl ：显示哪些字段，比如，下面的查询结果规定显示

html怎样抽出头部导航页面,thymeleaf导航栏---公共页面元素抽取

weixin_32557787的博客

06-03

551

1.public.html Title 1 首页水果 ...

thymeleaf常用标签 thymeleaf:字符串Strings常见的使用方法

热门推荐

hepei120的专栏

06-04

2万+

判断是不是为空:null: <span th:if="${name} != null">不为空</span> <span th:if="${name1} == null">为空</span> 判断是不是为空字符串: “” <span th:if="${#strings.isEmpty(name1)}">

SpringBoot页面展示Thymeleaf

Wave的专栏

04-10

1157

开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言 Thymeleaf FreeMarker Velocity Groovy JSP 上面并没有列举所有SpringBoot支持的页面模板技术。其中Thymeleaf是SpringBoot官方所推荐使用的，下面来谈谈Thymeleaf一些常用...

【Thymeleaf之Template Layout】使用Navication让导航栏在每一个页面保持一致

weixin_44100826的博客

11-28

1082

【Thymeleaf之Template Layout】使用Template Layout让导航栏在每一个页面保持一致1、导入JQuery2、新建Navication.html3、在主页引用Navication.html 1、导入JQuery https://jquery.com/. 新建文件：jquery-3.4.1.min.js，把下载好的东西全部复制进去引入JS文件，注意路径：与下面Bo...

Thymeleaf实现静态页搜索页：搜索页面渲染、商品详情页

weixin_41942838的博客

12-16

3000

Thymeleaf实现静态页搜索页商品详情页静态化工程搭建商品详情页静态化功能实现 1.详情页静态化操作 2.填充基础数据 Spu、List<Sku> 3.规格切换搜索页面渲染 1.数据展示 2.搜索条件展示 3.实现条件搜索控制 1.Thymeleaf 1.1 介绍 thymeleaf是一个XML/XHTML/HTML5模板引擎，可于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernánde

thymeleaf 的代码片段

05-26

以下是一个基本的 Thymeleaf 代码片段，它将一个列表中的元素显示为一个 HTML 表格： ```html <th>ID <th>Name <th>Age ${people}"> ${person.id}">1 ${person.name}">John Doe ${person.age}">...