title: JQuery/JavaScript: how to retain active nav state after link?
body: <p>I've found many posts on how to add the active class to a nav link via jquery, but nothing on how to maintain the active state after the nav link is clicked.</p>
  
  <p>Using code found on this site, I'm removing and adding the active class onclick. In an attempt to keep this active state after navigating/reloading, my thought is to set session variables via onclick, and re-add the active class.  </p>
  
  <p><strong>What I have is not working.</strong></p>
  
  <p><a href="https://hicksdesign.co.uk/else/cssnav/contact.html" rel="nofollow noreferrer">This</a> seems to work, but doesn't seem to be best-practice, by today's standards.</p>
  
  <p><strong>HMTL:</strong></p>
  
  <pre><code> &lt;nav&gt;
      &lt;a href="about.xhtml" id="about" &gt;About&lt;/a&gt;
      &lt;span class="nav_divide"&gt;&lt;/span&gt;
      &lt;a href="work.xhtml" id="work" &gt;Work&lt;/a&gt;
      &lt;span class="nav_divide"&gt;&lt;/span&gt;
      &lt;a href="mission.xhtml" id="mission" &gt;Mission&lt;/a&gt;
      &lt;span class="nav_divide"&gt;&lt;/span&gt;
      &lt;a href="contact.xhtml" id="contact" &gt;Contact&lt;/a&gt;
  &lt;/nav&gt;   
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code> nav a.active {
       border-bottom: 3px solid #d10f0f;
   }
  </code></pre>
  
  <p><strong>Script:</strong></p>
  
  <pre><code> //Check for session variables.
  $(document).ready(function() {
  
      //If 'page' session is defined
      if (window.sessionStorage.pageSession) {
  
          // make selected nav option active.
          var activeTab = '#' + window.sessionStorage.pageSession;
          $(activeTab).addClass('active');
  
      } else {
  
          // If pageSession is not defined, you're at home
          window.sessionStorage.pageSession = ('page', 'home');
      }
  
      //Set link location for page refresh/reload
  
  
   });
  
  // Place or remove nav active state.
  $(document).on('click','nav a',function(){
  
      //Set 'page' and 'link' variables based on nav values. 
      var page = this.id;
      var link = this.href;
  
      // Set 'page' and 'link' session variables based on nav values.
      var window.sessionStorage.pageSession = ('page', page);
      var window.sessionStorage.linkSession = ('link', link);
  
      // Update classes.
      $('nav .active').removeClass('active'); 
      $(this).addClass('active');
  
      // Link to nav ahref.
      window.location = sessionStorage.linkSession;
  
  });
  </code></pre>