<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
????????nav?ul?{
????????????padding:?0;
????????????list-style:?none;
????????}
????????nav?ul?li?{
????????????text-decoration:?none;
????????????width:?70px;line-height:?50px;
????????????text-align:?center;
????????????float:?left;
????????????background-color:?#000;
????????????color:?#fff;
????????????cursor:?pointer;}
????????.gray?{background-color:?rgba(0,0,0,0.6);}
????</style>
</head>
<body>
????<nav>
????????<ul>
????????????<li>首頁</li>
????????????<li>實戰(zhàn)</li>
????????????<li>路徑</li>
????????????<li>猿問</li>
????????????<li>手記</li>
????????</ul>
????</nav>
????<script?type="text/javascript">
????????$("nav?li").click(function(){
????????????$(this).addClass("gray").siblings().removeClass("gray");
????????})
????</script>
</body>
</html>
$("nav?li").click(function(){
? ? ?$(this).addClass("gray").siblings().removeClass("gray");
?})
一句搞定
自己引一個jQuery庫就行