title: How do I keep my javascript styles after a menu button is clicked and that new page loads?
body: <p>I am trying to make my navbar menu items have a specific style when the user is in that specific page using Javascript. So far I am able to change the style when the button is clicked, but once that new page loads, the styles disappear and the menu items are all the same again. How do I keep the styles so the page's button (the one the user is currently in) has the special style.</p>
  
  <pre><code>&lt;div class="navbar-nav"&gt;
      &lt;a id="home" class="active"&gt;HOME&lt;/a&gt;
      &lt;a id="automobile" class=""&gt;AUTO&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit 2: Ok so I am very close!  Everything works, except that it will remove the active class from the home button, but once the new page reloads, it will add it back again and i'm stuck with two  buttons with the active link class.  What is the solution for this?  Here is my new code:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $('a').click(function(){
              $(this).addClass("active");
              $('nav #navbar_menu .navbar-nav a').removeClass("active");
              var activeIndex = $(this).index();
              var activeIndex = activeIndex + 1;
              localStorage.setItem('mySelectValue', activeIndex);
          });      
      });
  
     var activeIndex = localStorage.getItem('mySelectValue');
      if (isNaN(activeIndex)) {
          console.log('nothing stored');
      } else {
          $('a:nth-child('+activeIndex+')').addClass('active');
      }
  &lt;/script&gt;
  </code></pre>