[ Bootstrap. Keep active class on new page ]
I have faced a problem with adding "active" class to my tabs. I know how to add active class to tab when i click on it. But i don't know how to save active class on tab after page reload.
Part of my jsp code
<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></div>
</div>
</p>
<p>Script for adding active class</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
}
});
});
When i click on link it send me to another page, but that another page has no active class. So how can i "save" or "hold" active class and put in in new page.
Answer 1
Inside your click handler you are adding and removing the 'active' class on the <li> element. In bootstrap the 'active' class is applied to the <a> element instead. With a small adjustment to your code this works:
$('.cat-nav li a').click(function() {
$('.cat-nav li a').removeClass('active');
$(this).addClass("active");
});
Link to example in codepen: http://codepen.io/johnwilson/pen/akVgxq
Answer 2
Finally i have solved it !
$(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>