javascript - 单击时在 Bootstrap 中获取事件类

Question

我有 3 个选项可供选择。

点击时有一个 active 类，但当我点击它时，它不会更改为第二个或第三个 选项。

是否有任何 Bootstrap 内置函数，如果没有，那么我如何在点击时获得它:

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">WordPress Theme Pro</h4>
        <p class="list-group-item-text">$ 15.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Premium</h4>
        <p class="list-group-item-text">$ 25.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Agency</h4>
        <p class="list-group-item-text">$ 35.00</p>
    </a>
</div>  

Answer 1

Documentation 中没有切换功能 因此您可以添加点击事件来切换事件类，例如:

$(function(){
  $('body').on('click', '.list-group-item', function(){
    $('.list-group-item').removeClass('active');
    $(this).closest('.list-group-item').addClass('active');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">WordPress Theme Pro</h4>
    <p class="list-group-item-text">$ 15.00</p>
  </a>
</div>
<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">WordPress Theme Premium</h4>
    <p class="list-group-item-text">$ 25.00</p>
  </a>
</div>
<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">WordPress Theme Agency</h4>
    <p class="list-group-item-text">$ 35.00</p>
  </a>
</div>