Javascript / JQuery在按钮组上的两个按钮之间切换活动类
Javascript / JQuery在按钮组上的两个按钮之间切换活动类
提问于 2017-04-02 22:25:00
我在btn-group中使用bootstrap。下面是html：
<div class="btn-group btn-group-sm" role="group">
<div type="button" class="btn btn-default btn-1">Button 1</div>
<div type="button" class="btn btn-default btn-2 active">Button 2</div>
</div>按钮2它已经激活了。
目前，我这样做是为了从一个类中删除活动类，并将其添加到另一个类中。
$('.btn-2').removeClass('active');
$('.btn-1').addClass('active');这是最干净的方法吗?还是有更好的方法让它可以在两个按钮之间切换这个活动类？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-02 22:27:12
使用：
$('.btn-group').on('click', '.btn', function() {
$(this).addClass('active').siblings().removeClass('active');
});我认为代码是不言自明的？它只是从您所单击的按钮的同级中删除任何现有的“活动”类，并将该类添加到所单击的按钮中。
下面是一个有效的代码片段：
$('.btn-group').on('click', '.btn', function() {
$(this).addClass('active').siblings().removeClass('active');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group btn-group-sm" role="group">
<div type="button" class="btn btn-default btn-1">Button 1</div>
<div type="button" class="btn btn-default btn-2 active">Button 2</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43169424
复制相关文章
相似问题