使用JQuery实现不同按钮的切换选中效果
Posted mthy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JQuery实现不同按钮的切换选中效果相关的知识，希望对你有一定的参考价值。
实现思路：
使用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>
以上是关于使用JQuery实现不同按钮的切换选中效果的主要内容，如果未能解决你的问题，请参考以下文章