CODEWITHSUNDEEP
jquerytwitter-bootstrap
Wizard
Wizard

Reputation: 22113

Traverse the navtags and stay on one of them

I wrote a nav-tabs using bootstrap 3.3.7

<ul class="nav nav-tabs nav-justified">
    <li><a href="#">Concept</a></li>
    <li><a href="#">Code</a></li>
    <li ><a href="#">Read</a></li>
    <li><a href="#">Action</a></li>
</ul>

Every time I click a tab, it's activated and others are deactivated,

<script>
    $(document).ready(
        $(".nav-tabs li").on("click", function(){
            $(".nav-tabs li").removeClass("active");
            $(this).addClass("active");
        }));
</script>

It works fine with code,

enter image description here

However, when I refreshed the page, all the tags active class are removed,

I want it stay on the clicked tag until another click is triggered.

Upvotes: 2

Views: 44

Answers (2)

mshouman
mshouman

Reputation: 384

First add id to ur tabs 

<ul class="nav nav-tabs nav-justified">
    <li id="concept"><a href="#">Concept</a></li>
    <li id="code"><a href="#">Code</a></li>
    <li id="read"><a href="#">Read</a></li>
    <li id="action"><a href="#">Action</a></li>
</ul>

<script>
    $(document).ready(
        var cachedTabId = sessionStorage.getItem('selected-tab');
        if(cachedTab) $("#"+cachedTabId).addClass("active");
        $(".nav-tabs li").on("click", function(){
            $(".nav-tabs li").removeClass("active");
            $(this).addClass("active");
            sessionStorage.setItem('selected-tab', $(this).attr('id'));
        }));
</script>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

What you are doing is on client side. And they do not persist. Either use localStorage or Cookies to achieve a persistent state, even after page reload.

Moreover, your code below won't work and throw an error. The corrected code is:

$(document).ready(function() {
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
  });
});

So every time when a click event is made, set the localStorage:

$(document).ready(function() {
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
    localStorage.setItem("active", $(this).text().trim());
  });
});

And when you load the page, set the active class:

$(document).ready(function() {
  $(".nav-tabs li").each(function () {
    if (typeof localStorage.getItem("active") != "undefined" && $(this).text().trim() == localStorage.getItem("active"))
      $(this).addClass("active");
  });
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
    localStorage.setItem("active", $(this).text().trim());
  });
});

Snippet

$(document).ready(function() {
  $(".nav-tabs li").each(function() {
    if (typeof localStorage.getItem("active") != "undefined" && $(this).text().trim() == localStorage.getItem("active"))
      $(this).addClass("active");
  });
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
    localStorage.setItem("active", $(this).text().trim());
  });
});
.active {font-weight: bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs nav-justified">
  <li><a href="#">Concept</a></li>
  <li><a href="#">Code</a></li>
  <li><a href="#">Read</a></li>
  <li><a href="#">Action</a></li>
</ul>

Note: StackSnippets don't allow localStorage. Please check output on: JSBin.

Upvotes: 1

Related Questions