版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq78442761/article/details/88523545
目录
理论
在导航页里面，当点击某个栏目的时候，就得被激活，在Spring Boot中，一般把导航页做成片段的形式，这个片段是可以根据参数进行激活某一个栏目，如下的演示所示，通过三元运算，来给class设置属性，这种方式十分有效果！
代码及演示
程序运行截图如下：
程序逻辑结构如下：
源码如下：
MyMvcConfig.java
package navactivedemo.demo.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class MyMvcConfig extends WebMvcConfigurerAdapter {
@Bean
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/index.html").setViewName("index");
registry.addViewController("/forum.html").setViewName("forum");
}
};
return adapter;
}
}
DemoApplication.java
package navactivedemo.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
bar.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>
<!--导航页-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" id="topbar">
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">My Web</h2>
<a href="#" class="m-item item m-mobile-hide" th:class="${activeUri=='index.html' ? 'm-item item m-mobile-hide active' : 'm-item item m-mobile-hide'}" th:href="@{index.html}"><i class="mini computer icon"></i>功能一</a>
<a href="#" class="m-item item m-mobile-hide" th:class="${activeUri=='forum.html' ? 'm-item item m-mobile-hide active' : 'm-item item m-mobile-hide'}" th:href="@{forum.html}"><i class="spinner loading icon"></i>功能二</a>
</div>
</div>
</nav>
</body>
</html>forum.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>
<div th:replace="commons/bar::#topbar(activeUri='forum.html')"></div>
<h1>Hello沃德---论坛</h1>
</body>
</html>index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>
<div th:replace="commons/bar::#topbar(activeUri='index.html')"></div>
<h1>Hello沃德---主页</h1>
</body>
</html>application.properties
spring.thymeleaf.cache=false
server.port=7777
porn.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.19.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.loginWebDemo</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>loginWeb</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--引入jquery-webjar-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
<!--引入bootstrap-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>