Bootstrap. Продолжить активный класс на новой странице

Question

У меня возникла проблема с добавлением «активных» классов на мои вкладки. Я знаю, как добавить активный класс к вкладке, когда я нажимаю на нее. Но я не знаю, как сохранить активный класс на вкладке после перезагрузки страницы.

Часть моего 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>

Скрипт для добавления активного класса

$(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'); 
 
     } 
 
    }); 
 
});

Когда я нажимаю на ссылку, у отправьте меня на другую страницу, но на другой странице нет активного класса. Итак, как я могу «сохранить» или «удерживать» активный класс и ввести новую страницу.

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>. В bootstrap класс 'active' применяется вместо элемента <a>. С небольшой корректировки кода это работает:

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

Ссылка на пример в codepen: http://codepen.io/johnwilson/pen/akVgxq