Jquery 通過切換按鈕中圖標的類來控制出現不同的按鈕圖標

原創 哥屋恩0528 2020-06-29 12:13 
<!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><!-- 添加一個切換效果，使用data-toggle屬性 --><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"> <!-- Link or button to toggle 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> 
















發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








jquery實現貪喫蛇功能






頁面部分
<body>
<canvas id="c1" width="300" height="300" style="background:#9FC"></canvas>
</body>
jquery部分
function Block






JspFnta

2020-07-07 09:16:22









Ajax傳值（Jquery）






Jquery
$.ajax({
type: 'post',//提交的方式
url:'saveResult.action',//提交的地址
data:$('#ff').serialize(),//提交的數據






CSDNRGY

2020-07-06 17:53:35









asp.net序列化json三種方式 jquery ajax json






  裝載： http://dev.21tx.com/2009/03/11/13975_1.html
　1 using System;
　2 using System.Collections;
　3 using System.Configu






pt5320

2020-07-05 23:59:59









jquery ajax 詳解






裝載：http://www.cnblogs.com/mybest/archive/2011/12/13/2285730.html
代碼：$(document).ready(function() {
            jQuery(






pt5320

2020-07-05 23:59:59









表單裏面的那些個常用的獲取值






一、radio單選問題：
Html內容：
<input type="radio" class="gender0" name="type" value="0" />男
<input type="radio" class="gender1"






正在崛起的小菜菜

2020-07-05 17:53:38









彈出層，遮罩層，浮層菜單






現在隨便打開個網頁都能見到浮層菜單，不會弄都說不過去了！
直接上代碼，一切盡在代碼中。
<html>
<head>
<meta charset="utf-8"></meta>
<script type="text/






csmzl

2020-07-05 10:25:46









Jquery 獲取 radio/select/checkbox 選中值






在Web中，由於CheckBox、Radiobutton 、DropDownList等控件使用的頻率比較高，就關係到這些控件在Jquery中的操作問題。
由於Jquery的版本更新很快，代碼的寫法也改變了許多，以下Jquery代碼適






大新软件技术部

2020-07-04 21:32:40









我的Jquery學習筆記（一）






ready函數是在頁面元素創建玩閉後被觸發的函數，可以多次調用此函數，並且每次調用的內容都會在頁面加載，其作用相當於C#中的 +=機制；
與Dom中的onload的區別：onload是所有Dom元素創建完畢、圖片、Css等都加載完畢後才






save_hhhhhP

2020-07-04 20:25:48









關於Jquery2






Jquery
事件綁定
文檔加載之後執行
Js
window.onload = function(){
頁面加載之後執行的內容
}
Jquery
$(document).ready(function(){
頁面加載






JiangLi_

2020-07-04 10:05:13









關於Jquery1






Jquery1
回顧 js_day2
阻止默認提交行爲 表單 οnsubmit=“return false” 超鏈 javascript:void(0)
事件對象event 獲取事件源target 橫縱座標client






JiangLi_

2020-07-04 10:05:03









使用jquery動態修改video標籤source的src不起作用問題解決方案






使用jquery動態修改video標籤source的src不起作用問題解決方案代碼解決方案load() 方法重新加載音頻/視頻元素
代碼
//html代碼
<audio controls="controls" style="ma






徊忆羽菲

2020-07-04 06:23:00









JQuery 獲取本地圖片的方法






獲取本地圖片可以使用FileReader對象中的readAsDataURL方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery






Bright2017

2020-07-04 03:04:43









Jquery ajax 異步中獲取this對象無效






原始寫法
$(".List").each(function () {
var objid = $(this).attr("id");
$.ajax({
ur






陈熙之

2020-07-03 20:48:10









[TOP]原生JS事件綁定方法以及jQuery綁定事件方法bind、live、on、delegate的區別






一、原生JS事件綁定方法：
1、通過ＨＴＭＬ屬性進行事件處理函數的綁定如：　
＜a href="#" οnclick="f()"＞
2、通過J






My-Lady

2020-07-03 17:44:21









js監聽某個元素高度變化來改變父級iframe的高度






最近需要做一個iframe調用其他頁面內容，這個iframe地址是可變化的，但是裏面的內容高度不確定且裏面內容高度可調整，所以需要通過監聽iframe裏面body的高度變化來調整iframe的高度。
後面發現了一個好用的插件det






前端李小白

2020-07-03 15:41:53