Javascript 使用 jquery onclick 功能添加和删除按钮上的活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29779764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add and remove class active on button with jquery onclick function
提问by Giulio Bambini
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.
有人可以帮助我吗？谢谢。
采纳答案by Marcin
if .activeclass should not be removed from activebutton after clicking on it please use addClassinstead of toggelClass
如果在单击后.active不应从活动按钮中删除类，请使用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 #headeid and .btn-group[role='group']which makes script applied only on buttons inside all button groups iside <div id="header"></div>
缩小按钮选择范围也是一种很好的做法，我使用了#headeid，.btn-group[role='group']这使得脚本仅应用于所有按钮组中的按钮 iside<div id="header"></div>
and here you have .activeclass definition:
在这里你有.active类定义：
.btn.active{
background-color: red;
}
回答by kosmos
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');
});
回答by Danny van Holten
You should use a combination of .each() and .click() here. So it will target every button in stead of only the first
您应该在这里使用 .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');
});
});
回答by Sai Deepak
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
试试这个
