首页 > 技术文章 > 排他思想---点击当前按钮背景颜色变化

myunYao 2018-04-27 14:58 原文

排他思想:清除所有的按钮的样式,只剩下自己。

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 7     <style>
 8         .current {
 9             background-color: pink;
10         }
11     </style>
12 </head>
13 <body>
14     <button class="current">按钮</button>
15     <button>按钮</button>
16     <button>按钮</button>
17     <button>按钮</button>
18     <button>按钮</button>
19     <button>按钮</button>
20 </body>
21 </html>
22 <script>
23     var $btn=$('button');
24     $btn.click(function(event) {
25         var $self=$(this);
26         // 排他思想:清除所有的按钮的样式  只剩下自己
27         $btn.removeClass('current');
28         $self.addClass('current');
29     });
30 </script>

效果展示如下:

推荐阅读