使用JQuery实现不同按钮的切换选中效果
2021-01-23 09:13
标签：char doctype title fun 代码 comm css har 样式 实现思路： 使用JQuery的 appCss() 方法和 removeClass() 方法，通过给选中的按钮增添 新的样式 （选中效果样式），清除（或切换）未选中按钮的 ”选中效果样式“ 来达到选中效果 截图： 代码如下： 使用JQuery实现不同按钮的切换选中效果 标签：char doctype title fun 代码 comm css har 样式 原文地址：https://www.cnblogs.com/mthy/p/13280492.html
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">按钮1button>
37 button class="butt" type="button">按钮2button>
38 button class="butt" type="button">按钮3button>
39 div>
40 body>
41 html>
文章标题：使用JQuery实现不同按钮的切换选中效果
文章链接：http://soscw.com/index.php/essay/45816.html