使用jquery onclick函数添加和删除按钮上的类
[英]Add and remove class active on button with jquery onclick function
问题描述
I'm actually using this button group structure with bootstrap. 
我实际上正在使用带有引导程序的按钮组结构。 Now I need to add class active to each button when I click on it. 现在，当我点击它时，我需要为每个按钮添加活动类。 And remove from it when I click on another button. 当我点击另一个按钮时，从中删除。
This is my HTML structure, is something like that: 这是我的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>
Someone who could help me? 有人可以帮帮我吗？ Thanks. 谢谢。
4 个解决方案
解决方案1
4 已采纳 2015-04-21 18:37:10
if .active class should not be removed from active button after clicking on it please use addClass instead of toggelClass 如果.active class在点击后不应该从活动按钮中删除，请使用addClass而不是toggelClass
$("#header .btn-group[role='group'] button").on('click', function(){
$(this).siblings().removeClass('active')
$(this).addClass('active');
})
it is also good practice to narrow buttons selection, I used #heade id and .btn-group[role='group'] which makes script applied only on buttons inside all button groups iside <div id="header"></div> 缩小按钮选择也是一个好习惯，我使用了#heade id和.btn-group[role='group'] ，这使得脚本仅应用于所有按钮组内的按钮上iside <div id="header"></div>
and here you have .active class definition: 在这里你有.active类定义：
.btn.active{
background-color: red;
}
解决方案2
3 2015-04-21 17:59:23
You are looking for something like: 您正在寻找类似的东西：
$('.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
You should use a combination of .each() and .click() here. 你应该在这里使用.each（）和.click（）的组合。 So it will target every button in stead of only the first 所以它将针对每个按钮而不是第一个按钮
$('#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
I hope this will help you because it works perfectly for me 我希望这会对你有所帮助，因为它对我有用
<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>
Try this one 试试这个吧
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.