jQuery学习日记---第三篇 JS实现导航条点击以后会高亮显示

致Great

发布于 2023-08-26 18:54:33

1550

发布于 2023-08-26 18:54:33

下面是实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-2.2.0.min.js"></script>
    <style>
        #nav li {float: left; width: 80px; text-align: center; list-style-type: none;}
        .nav-active {background: #ff47a5;}
        .nav-active a {color: #fff;text- decoration:none}
    </style>
</head>
<body>
<ul id="nav">
    <li class="nav-active"><a href="javascript:;">首页</a></li>
    <li><a href="javascript:;">Page1</a></li>
    <li><a href="javascript:;">Page2</a></li>
    <li><a href="javascript:;">Page3</a></li>
    <li><a href="javascript:;">Page4</a></li>
</ul>
	<script>
	$('#nav').find('li').click(function() {
		// 为当前点击的导航加上高亮，其余的移除高亮
		$(this).addClass('nav-active').siblings('li').removeClass('nav-active');
	});
	</script>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript