实现这个功能很简单,可是之前自己不怎么熟悉jquery,感觉各种乱写。现在终于整理好了思路。
html:
<div class="managementPanel"> <div>div1</div> <div class="red">div2</div> <div>div3</div> <div>div4</div> <div>div5</div> </div>
css:
<style type="text/css"> .managementPanel div:hover{ background: #588600; } .red{ background: red; } </style>
jquery:
<script type="text/javascript"> //点击 $(document).ready(function(){ $(".managementPanel div").click(function() { $(".managementPanel div").removeClass("red"); $(this).addClass("red"); }) }); </script>
很简单吧,点击增加颜色前先移除最开始的颜色,再增加。颜色有点丑,只是为了实现效果。最后类似这样.当然前提是一定要加载jquery库啊,不能粗心。