js怎样跳页面后导航二级菜单还是是高亮状态
答案:1 悬赏:50 手机版
解决时间 2021-01-26 23:09
- 提问者网友：做自己de王妃
- 2021-01-26 00:41
js怎样跳页面后导航二级菜单还是是高亮状态
最佳答案
- 五星知识达人网友：行路难
- 2021-01-26 01:27
实现这个效果需要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>
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
推荐资讯