jQuery高亮当前选中菜单

最新推荐文章于 2023-05-23 10:43:11 发布

麦田

最新推荐文章于 2023-05-23 10:43:11 发布

阅读量9.5k

点赞数 5

分类专栏： jQuery 文章标签： jQuery 高亮菜单

本文链接：https://blog.csdn.net/itmyhome1990/article/details/42495181

版权

本文介绍了如何在非Bootstrap页面中使用jQuery来高亮显示当前选中的菜单项，并提到需要自定义active的CSS样式。

摘要由CSDN通过智能技术生成

假如页面中有以下菜单

<ul class="nav navbar-nav">
	<li class="active"><a href="/index.html">首页</a></li>
	<li id="archive"><a href="/archive.html">归档</a></li>
	<li id="categorys"><a href="/categorys.html">分类</a></li>
	<li id="about"><a href="/about.html">关于</a></li>
</ul>

如果不是Bootstrap自行定义active CSS样式

<script type="text/javascript">
	$(document).ready(function() {
		$(".navbar-nav li").click(function() {
			$(this).addClass("active").siblings().removeClass("active");
		});
	});
</script>

作者：itmyhome