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>
时间: 2024-08-24 23:32:09