html代码 <div class="nav"> <ul> <li><a href="#">点击一</a></li> <li><a href="#">点击二</a></li> <li><a href="#">点击三</a></li> <li><a href="#">点击四</a></li> </ul> </div>
样式代码
<style type="text/css">
*{
padding:0px;
margin:0px;
}
li{
list-style: none;
}
.nav{
width: 100%;
height: 20px;
line-height: 60px;
height: 60px;
}
.nav li{
width: 24%;
float: left;
background: #FFFF33;
border: 1px solid #fff;
}
.nav li a{
color: #666;
text-align: center;
display: block;
}
.nav li a:hover{
color: #fff;
background: #66CC00;
}
.on{
color: #fff !important;
background: #66CC00;
}
</style>
JQ代码
<script type="text/javascript"> $(".nav li a").click(function(){ $(this).addClass("on").parent().siblings().children().removeClass("on"); }) </script>
原文：http://www.cnblogs.com/elevnelevn/p/5757840.html