0
点赞
收藏
分享

微信扫一扫

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

盖码范 2022-01-06 阅读 106

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 }" />
举报

相关推荐

0 条评论