Question

我有3个选项可供选择。

点击时有一个active课程，但是当我点击它时，它不会更改为第二个或第三个option。

是否有任何引导程序内置函数，如果没有，那么如何在点击时获得此功能：

<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

只需从其他元素中删除active类，然后将其添加到单击的元素中即可顺便提一下，我建议你使用另一个html标签而不是<a></a>

＆＃13;

$(document).ready(function() {
    $('.list-group-item').click(function() {
        $('.list-group-item').removeClass('active');
        $(this).closest('.list-group-item').addClass('active')
    });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 2

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>

Answer 3

请尝试以下代码：

用以下代码替换现有代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('a.list-group-item').click(function(){
      $('a.list-group-item').removeClass('active');
      $(this).addClass('active')
    });
});
</script>

希望，这可能对您有所帮助。

单击“获取Bootstrap中的活动类”

3 个答案: