下面是实例代码
代码语言：javascript复制<!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>
