Question

很简单，我只需要一个快速指针，

Bootstrap Button Group（用于1-in-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

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

Answer 1

您必须使用active方法从之前的button（之前选择的）中删除removeClass()课程。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

除了@ Alexandru-IonutMihai的回答之外，如果您想要一行，您可以选择有效按钮和刚刚点击的按钮toggle their classes。

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>

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

只需向Alexandru的原始answer添加一个小调整...

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

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

此处添加的唯一新行是：$(this).siblings().removeClass('active')，以便仅从当前按钮组中删除以前添加的任何active类。

停用切换按钮

3 个答案: