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

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.querySelector('#thisNav').value
    var navs = document.querySelectorAll('.a-first')
    console.log(navs)
	for(let item of navs){
		if(thisValue == item.dataset.id){
		   item.classList.add('selected')
		}
	}
}
$('#large-input').focus(function(){
	        $('#pageNav').css({
				display:'none'
			})
			$(this).css({
				width:'96%'
			})
			$('#large-form').css({
				width:'100%'
			})
	    });
	$('#large-input').blur(function(){
	        $('#pageNav').css({
	        	display:'block'
	        })
			$(this).css({
				width:'100px'
			})
			$('#large-form').css({
				width:'auto'
			})
	    });

2、对需要高亮的导航设置class和data-id，class用于获取该高亮部分的id以及追加高亮的样式

 3、设置选中后的当前页面导航高亮的样式，追加了一个样式，既加入了selected后（上述JS判断是否追加）就使用该样式

<style>
    .a-first.selected{
        color: #f7bd00 !important
    }
</style>

4、在页面中引入标记的字段，用来获取本页面的id

 <input type="hidden" id="thisNav" th:value="${commonContent.oldParentId }" />