ページの内容に応じてブートストラップクラスlist-group-itemをアクティブにする方法

Question

コードのいくつかの行を正確に共有するいくつかのhtmlファイルがあります。私はインクルードでそのコードを持っており、私はすべての単一のページでそれを呼び出します。それは基本的にはメニューか、それともBootstrapリストグループです。ここにコードがあります：

<div class="list-group"> 
    <a href="<?php echo cfgRoot; ?>/app/page1.php" class="list-group-item"><i class="glyphicon glyphicon-send"></i> Page1</a> 
    <a href="<?php echo cfgRoot; ?>/app/page2.php" class="list-group-item"><i class="glyphicon glyphicon-cog"></i> Page2</a> 
    <a href="<?php echo cfgRoot; ?>/app/page3.php" class="list-group-item active"><i class="glyphicon glyphicon-question-sign"></i> Page3</a> 
    <a href="<?php echo cfgRoot; ?>/app/page4.php" class="list-group-item"><i class="glyphicon glyphicon-picture"></i> Page4</a> 
</div> 

これは、私が訪問しているページによってアクティブクラスを変更する必要があるという問題です。したがって、メニューは99％と同じです。つまり、そのクラスを変更する必要があります。

これに対処するための最良のアプローチ、推奨または解決策は何ですか？あなたはjqueryの

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

Answer 1

あなたは、書類準備の上、URLをチェックして、あなたが必要とする要素にactiveクラスを適用することができます。

$(document).ready(function() { 
    var url = window.location.href; 

    if (url.IndexOf('page1') > -1) { 
    $(".list-group:first-child").addClass("active"); 
    } 

    // ... other cases, using switch for each 

}); 

その

Answer 2

を介して行うことができます