使用jquery onclick函數添加和刪除按鈕上的類
[英]Add and remove class active on button with jquery onclick function
問題描述
我實際上正在使用帶有引導程序的按鈕組結構。 現在，當我點擊它時，我需要為每個按鈕添加活動類。 當我點擊另一個按鈕時，從中刪除。
這是我的HTML結構，是這樣的：
<body>
<div id="header">
<div class="logo">Prova<span class="sec-logo">toscana</span>15</div>
<div class="bottoni">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="b1">12345</button>
<button type="button" class="btn btn-default" id="b2">12345</button>
<button type="button" class="btn btn-default" id="b3">12345</button>
<button type="button" class="btn btn-default" id="b4">12345</button>
<button type="button" class="btn btn-default" id="b5">12345</button>
<button type="button" class="btn btn-default" id="b6">12345</button>
</div>
</div>
</div>
</body>
有人可以幫幫我嗎？ 謝謝。
4 個解決方案
解決方案1
4 已采納 2015-04-21 18:37:10
如果.active class在點擊后不應該從活動按鈕中刪除，請使用addClass而不是toggelClass
$("#header .btn-group[role='group'] button").on('click', function(){
$(this).siblings().removeClass('active')
$(this).addClass('active');
})
縮小按鈕選擇也是一個好習慣，我使用了#heade id和.btn-group[role='group'] ，這使得腳本僅應用於所有按鈕組內的按鈕上iside <div id="header"></div>
在這里你有.active類定義：
.btn.active{
background-color: red;
}
解決方案2
3 2015-04-21 17:59:23
您正在尋找類似的東西：
$('.btn').on('click', function(){
$(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
$(this).toggleClass('active');
});
解決方案3
0 2015-04-21 18:23:02
你應該在這里使用.each（）和.click（）的組合。 所以它將針對每個按鈕而不是第一個按鈕
$('#header .btn').each(function(){
$(this).click(function(){
$(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
$(this).toggleClass('active');
});
});
解決方案4
0 2015-04-21 19:11:00
我希望這會對你有所幫助，因為它對我有用
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").each(function(){
$(this).click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});
});
</script>
試試這個吧
JQuery 使用 Onclick 函數在多條件語句中刪除和添加類
[英]JQuery Remove and Add a Class in a Multi-Conditional Statement with Onclick Function
JavaScript 中的 Onclick 功能不起作用。 我們需要在點擊頁面上添加活動類並刪除上一頁
[英]Onclick function in JavaScript not working. We need on click page to add active class and remove previous page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
onclick jQuery添加/刪除類功能不起作用
jQuery onclick添加類並刪除
onClick 活動選項卡添加/刪除類
onClick添加/刪除活動的類li項目
JQuery 使用 Onclick 函數在多條件語句中刪除和添加類
Jquery 問題 onclick 添加 class 並刪除 class
JavaScript 中的 Onclick 功能不起作用。 我們需要在點擊頁面上添加活動類並刪除上一頁
選項卡活動添加刪除 jquery 中的 class 不起作用
使用 jquery 添加/刪除 ul 列表的活動類？
jQuery函數在按鈕懸停時從div添加/刪除類
相關標簽