實現思路：
使用JQuery的 appCss() 方法和 removeClass() 方法，通過給選中的按鈕增添 新的樣式 （選中效果樣式），清除（或切換）未選中按鈕的 ”選中效果樣式“ 來達到選中效果
截圖：
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>使用JQuery實現不同按鈕的切換選中效果</title> 6 <script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $(".butt").click(function(){ 10 $(".butt").removeClass("button-click"); // 清除已經選中了的按鈕的樣式 11 $(this).addClass("button-click"); // 重新給新選中的按鈕添加選中樣式 12 }) 13 }) 14 </script> 15 <style type="text/css"> 16 .box{ 17 width: 1200px; 18 height: 300px; 19 margin: auto; 20 } 21 .butt{ 22 width: 100px; 23 height: 50px; 24 border: none; 25 outline: none; 26 background-color: #5adef8; 27 } 28 .button-click{ 29 background-color: darkorchid; 30 color: #fff; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box"> 36 <button class="butt" type="button">按鈕1</button> 37 <button class="butt" type="button">按鈕2</button> 38 <button class="butt" type="button">按鈕3</button> 39 </div> 40 </body> 41 </html>