クリック時にブートストラップでアクティブなクラスを取得

Question

私は3つの選択肢があります。

オンクリックではactiveクラスがありますが、クリックすると2番目または3番目に変更されません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クラスを削除して、クリックされた要素に追加します。そして、どのように私はクリックでこれを取得することができない場合

は、内蔵の機能任意のブートストラップがあります。ところで
私はあなたがそうあなたがアクティブなクラスを切り替えることができますクリックイベントを追加することができますDocumentationに代わりはあり<a></a>

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

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

Answer 2

なしトグル機能の別のhtmlタグを使用することをお勧めします以下のような：

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

このコードを試してください：

はこの1つを使用して、既存のコードを置き換えます

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

ホープ、これはあなたに役立つかもしれません。