目录JAVA全系列 教程
3762个小节阅读：7090.7k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本，未来主流的版本
人工智能 教程
顺势而为，AI创新未来
大厂算法 教程
算法，程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
之前每次发送请求时，侧边栏菜单都会合起来，用户体验较差，我们希望点击侧边栏菜单后，浏览器记住我们点击的内容，在点击其他菜单前，该内容处于被选中状态。
查看源码后，我们知道侧边栏的标签在被选中时class='active'，我们可以利用sessionStorage保存被选中的菜单，让它一直处于被选中的状态。
sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在JavaScript语言中可通过 window.sessionStorage或sessionStorage调用此对象。
修改common_aside.html：
xxxxxxxxxx<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5"><!-- 导航侧栏 --><aside class="main-sidebar" th:fragment="aside"> <section> ... </section> <script> $(function () { // 点击外层菜单时记录他的id $(".treeview").click(function () { sessionStorage.menu = $(this).attr("id"); }) // 点击内层菜单时记录他的id $(".treeview-menu li").click(function () { sessionStorage.menu2 = $(this).attr("id"); })
// 对已点击的外层菜单添加class属性为active $("#"+sessionStorage.menu).addClass("active"); // 对已点击的内层菜单添加颜色样式 $("#"+sessionStorage.menu2+" a").css("color","white"); }) </script></aside></html>