我在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');
这是最干净的方法吗?还是有更好的方法让它可以在两个按钮之间切换这个活动类?
发布于 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>
https://stackoverflow.com/questions/43169424
复制相似问题