我正在使用带有 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');
这是最干净的方法还是有更好的方法可以在两个按钮之间切换这个事件类?
最佳答案
使用:
$('.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>
关于Javascript/JQuery 在按钮组的两个按钮之间切换事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43169424/