JS 导航栏按钮选中

BirdMan98

已于 2022-07-12 17:18:32 修改

阅读量825

点赞数

分类专栏： JavaScript 文章标签： html jquery js

于 2020-10-31 09:36:05 首次发布

本文链接：https://blog.csdn.net/weixin_41405524/article/details/109398251

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

应用

在前端开发中，如果有目录，那么肯定会有目录被选中的样式，以区别和其他未选中的目录，下面我来通过JS来实现这一需求

JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){	
  $(".i").click(function(){
  	//去除所有菜单的样式
	$(".i").removeClass("blue");
	//给当前菜单添加样式
    $(this).addClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>
<p class="i">这是一个段落。</p>
<p class="i">这是另外一个段落。</p>
</body>
</html>