ブートストラップ。新しいページでアクティブなクラスを維持する

Question

"アクティブ"クラスをタブに追加する際に問題が発生しました。 アクティブなクラスをタブに追加する方法を知っています。しかし、私はどのようにページのリロード後にタブ上にアクティブなクラスを保存するのか分からない。

私はリンクの上にそれをクリックすると、アクティブクラスに

$(document).ready(function() { 
 
    $('.cat-nav li a').click(function(e) { 
 

 
     $('.cat-nav li').removeClass('active'); 
 

 
     var $parent = $(this).parent(); 
 
     if (!$parent.hasClass('active')) { 
 
      $parent.addClass('active'); 
 
     } 
 
    }); 
 
});

を追加するための私のJSPコード

<div class="row top-buffer"> 
 
    <div class="col-md-10 col-md-offset-1 products"> 
 
     <ul class="nav nav-pills cat-nav"> 
 
      <c:forEach items="${catList}" var="category"> 
 
       <li role="presentation" > 
 
        <a href="/show-category?id=${category.id}" >${category.name}</a> 
 
        <ul class="dropdownn"> 
 
         <c:forEach items="${category.childCategories}" var="childCat"> 
 
          <li><a href="/show-category?id=${childCat.id}">${childCat.name}</a> </li> 
 
         </c:forEach> 
 
        </ul> 
 
       </li> 
 
      </c:forEach> 
 
      <li role="presentation" class="pull-right"><a href="/show-category?id=0">All</a> </li> 
 
     </ul> 
 
    </div> 
 
</div>

スクリプトの一部私を別のページに送りますが、別のページにはアクティブなクラスがありません。では、どうやって積極的なクラスを "保存する"か "保留"し、新しいページに入れることができます。

Answer 1

は、最後に私はそれを解決しました！私を助けるために結ぶための

$(document).ready(function() { 
 
    var id = getParameterByName('id'); 
 

 
    $('.cat-nav li[role="presentation"]').each(function() { 
 

 
     var id2 = $(this).attr("id"); 
 

 
     if(id == id2){ 
 
      $(this).addClass('active'); 
 
     } 
 
    }); 
 
}); 
 

 
function getParameterByName(name, url) { 
 
    if (!url) url = window.location.href; 
 
    name = name.replace(/[\[\]]/g, "\\$&"); 
 
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
 
     results = regex.exec(url); 
 
    if (!results) return null; 
 
    if (!results[2]) return ''; 
 

 
    localStorage.setItem(name, results[2].replace(/\+/g, " ")); 
 
    var result = localStorage.getItem("id"); 
 
    return result; 
 
}

<div class="row top-buffer"> 
 
    <div class="col-md-10 col-md-offset-1 products"> 
 
     <ul class="nav nav-pills cat-nav"> 
 
      <c:forEach items="${catList}" var="category"> 
 
       <li role="presentation" id="${category.id}"> 
 
        <a href="/show-category?id=${category.id}" >${category.name}</a> 
 
        <ul class="dropdownn"> 
 
         <c:forEach items="${category.childCategories}" var="childCat"> 
 
          <li><a href="/show-category?id=${childCat.id}">${childCat.name}</a> </li> 
 
         </c:forEach> 
 
        </ul> 
 
       </li> 
 
      </c:forEach> 
 
      <li role="presentation" class="pull-right" id="0"><a href="/show-category?id=0">All</a> </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 2

クリックハンドラの中で、<li>要素の「アクティブ」クラスを追加したり削除したりしています。ブートストラップでは、代わりに 'アクティブ'クラスが<a>要素に適用されます。あなたのコードを少し調整して、これは動作します：codepenの例と

$('.cat-nav li a').click(function() { 
    $('.cat-nav li a').removeClass('active'); 
    $(this).addClass("active"); 
}); 

リンク： http://codepen.io/johnwilson/pen/akVgxq