Jquery 通过切换按钮中图标的类来控制出现不同的按钮图标

最新推荐文章于 2022-04-10 16:52:52 发布

哥屋恩0528

最新推荐文章于 2022-04-10 16:52:52 发布

阅读量1k

点赞数

分类专栏： Jquery

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wlpz0528/article/details/51376870

版权

Jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>通过切换按钮中图标的类来控制出现不同的按钮图标</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<pre name="code" class="html"><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<style tyle="text/css">.class1{font-size:120%;color:green;}.class2{font-size:120%;color:red;}</style><script type="text/javascript">$(document).ready(function(){ $('#togglebutton').click(function(){ //alert("test"); var $btn = $(this), on = 'glyphicon-volume-up', off = 'glyphicon-volume-off', $icon = $btn.find('span'), //$p = $('#p1'), btnon = 'btn btn-success', btnoff = 'btn btn-warning'; //这里通过切换按钮中图标的类来控制出现不同的按钮图标，每次点击来回切换声音开关图标 $icon.toggleClass(on).toggleClass(off); $('#p1').toggleClass("class1").toggleClass("class2"); $("#btn1").toggleClass(btnon).toggleClass(btnoff); //$btn.button('toggle'); 如果不想使用html中的data-toggle定义，可以使用这样js实现按钮切换状态效果 });});</script></head><body><div><button id="togglebutton" class="btn btn-lg btn-default" data-toggle="button"> <span class="glyphicon glyphicon-volume-up"></span></button><p id='p1'>This is a paragraph.</p><button id="btn1" class="btn">Button</button></div><hr/><form> <div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"><label> <input type="checkbox"> Check me out</label> </div> <button type="submit" class="btn btn-default">Submit</button></form><hr/><div class="dropdown">  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">行为</a></li> <li><a tabindex="-1" href="#">其它行为</a></li> <li><a tabindex="-1" href="#">特别行为</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">分割链接</a></li> </ul> </div><hr/></body></html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 通过切换按钮中图标的类来控制出现不同的按钮图标

通过切换按钮中图标的类来控制出现不同的按钮图标 .class1{font-size:120%;color:green;}.class2{font-size:120%;color:red;}$(document).ready(function(){ $('#togglebutton').click(function(){ //alert("test"); var $btn = $
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。