js怎样跳页面后导航二级菜单还是是高亮状态
1个回答
展开全部
实现这个效果需要CSS的配合，关键是用JS为当前点击对象添加高亮的样式，并移除其他对象的高亮样式。举例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#nav li {float: left; width: 80px; text-align: center; list-style-type: none;}
.nav-active {background: #369;}
.nav-active a {color: #fff;}
</style>
</head>
<body>
<ul id="nav">
<li class="nav-active"><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">导航一</a></li>
<li><a href="javascript:;">导航二</a></li>
<li><a href="javascript:;">导航三</a></li>
<li><a href="javascript:;">导航四</a></li>
</ul>
<script src="
<script>
$('#nav').find('li').click(function() {
// 为当前点击的导航加上高亮，其余的移除高亮
$(this).addClass('nav-active').siblings('li').removeClass('nav-active');
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#nav li {float: left; width: 80px; text-align: center; list-style-type: none;}
.nav-active {background: #369;}
.nav-active a {color: #fff;}
</style>
</head>
<body>
<ul id="nav">
<li class="nav-active"><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">导航一</a></li>
<li><a href="javascript:;">导航二</a></li>
<li><a href="javascript:;">导航三</a></li>
<li><a href="javascript:;">导航四</a></li>
</ul>
<script src="
<script>
$('#nav').find('li').click(function() {
// 为当前点击的导航加上高亮，其余的移除高亮
$(this).addClass('nav-active').siblings('li').removeClass('nav-active');
});
</script>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
