click点击以后添加新class,删除其余同名class

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title></title>
 6     <style type="text/css">
 7     .select,.select a{color: #DDD;}
 8     </style>
 9     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
10     <script type="text/javascript">
11     $(function(){
12         $("#J_searchU1 > li").each(function(){
13             $(this).click(function(){
14                 $("li").removeClass("select");
15                 $(this).addClass("select");
16             });
17         });
18     });
19     </script>
20 </head>
21 <body>
22     <ul id="J_searchU1">
23         <li class="J_searchTab"><a href="javascript:void(0)">找优惠</a></li>
24         <li class="J_searchTab"><a href="javascript:void(0)">找商家</a></li>
25         <li class="J_searchTab"><a href="javascript:void(0)">找优惠</a></li>
26         <li class="J_searchTab"><a href="javascript:void(0)">找商家</a></li>
27         <li class="J_searchTab"><a href="javascript:void(0)">找优惠</a></li>
28         <li class="J_searchTab"><a href="javascript:void(0)">找商家</a></li>
29         <li class="J_searchTab"><a href="javascript:void(0)">找优惠</a></li>
30         <li class="J_searchTab"><a href="javascript:void(0)">找商家</a></li>
31     </ul>
32 </body>
33 </html>
posted @ 2012-06-01 15:07  小猩猩君  阅读(1303)  评论(0编辑  收藏  举报