禁用切换按钮

Question

非常简单，我只需要一个快速的指针,

Bootstrap按钮组（用于1对3的切换按钮）定义如下：

    <!--  Twitter Bootstrap Button Group -->
     <div class="btn-group">
      <button type="button" class="btn btn-primary">General</button>
      <button type="button" class="btn btn-primary">Tab 2</button>
      <button type="button" class="btn btn-primary">Tab 3</button>
    </div>  

点击按钮时，我会选择它以保持其处于活动/按下状态：这是我的当前选项卡，但我需要取消选择其他所有按钮，一次只能切换1个按钮。

   $('.btn').click(function(e) {
        e.preventDefault();
        $(this).addClass('active');
    })
// this never unselects other toggle buttons

此外，我应该如何定义每个切换按钮下的内容？

- gene b.

Answer 1

您需要使用removeClass()方法从以前选择的button中删除active类。

 $('.btn').click(function(e) {
    e.preventDefault();
    $('.btn-group > button.active').removeClass('active');
    $(this).addClass('active');
 })

$('.btn').click(function(e) {
        e.preventDefault();
        $('.btn-group > button.active').removeClass('active');
        $(this).addClass('active');
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
      <button type="button" class="btn btn-primary">General</button>
      <button type="button" class="btn btn-primary">Tab 2</button>
      <button type="button" class="btn btn-primary">Tab 3</button>
</div>

- Mihai Alexandru-Ionut

---

刚有一个想法...这可能会从当前组范围之外的任何其他按钮中删除“active”类？只从当前按钮的“siblings”中删除活动类是否更安全？ - Dhruv Saxena

尊敬的先生/女士，感谢您关注所提出的问题。虽然我有一个小问题需要解决，但我并不确定它是否应该被视为问题范围内或超出问题范畴。我也不想在这个精彩答案的评论区中显得孜孜不倦。因此，我真诚地尊重您的发布，并且如果没有任何问题的话，我会创建一篇新的帖子并引用您的帖子... 谢谢。 - Dhruv Saxena

Answer 2

此外，除了@Alexandru-IonutMihai的回答，如果你想一行搞定，你可以选择活动按钮和刚刚点击的按钮，然后切换它们的类。

var $btn = $('.btn-group .btn');

$btn.click(function(e) {

  e.preventDefault();

  $(this).add($btn.filter('.active')).toggleClass('active');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="btn btn-primary">General</button>
  <button type="button" class="btn btn-primary">Tab 2</button>
  <button type="button" class="btn btn-primary">Tab 3</button>
</div>

- Alvaro

Answer 3

$('.btn').on('click', function(e) {
    e.preventDefault();
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group">
      <button type="button" class="btn btn-primary">General</button>
      <button type="button" class="btn btn-primary">Tab 2</button>
      <button type="button" class="btn btn-primary">Tab 3</button>
</div>

<div class="btn-group">
      <button type="button" class="btn btn-primary">Tab 4</button>
      <button type="button" class="btn btn-primary">Tab 5</button>
      <button type="button" class="btn btn-primary">Tab 6</button>
</div>

在Alexandru原始答案的基础上，只需要添加一个小修改即可...

如果页面中有多个按钮组，则为了隔离选择/取消选择事件，并确保这些按钮组不会相互干扰，我们可以稍微修改代码如下：

$('.btn').on('click', function(e) {
   e.preventDefault();
   $(this).siblings().removeClass('active');
   $(this).addClass('active');
});

这里唯一新增的代码是：$(this).siblings().removeClass('active')，它会移除当前按钮组中之前添加的任何 active 类。

- Dhruv Saxena