title: Using a cookie to remove and add classes to list items
body: <p>I know there are a few posts on this problem but none of them are working for me so I decided to create my own thread.</p>
  
  <p>Here is my list:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;!-- nav menu --&gt;
      &lt;ul class="clearfix"&gt;
          &lt;li&gt;&lt;a runat="server" href="Slideshow.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a runat="server" class="active" href="AboutUs.aspx"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a runat="server" href="Contact.aspx"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>nav li a.active
  {
      border-bottom: 3px solid #fd9625;
  }
  </code></pre>
  
  <p>When the user click on a list item, the bottom border is shown.
  I know this should be changed server-side using cookies but I can't get any solution to work for me.</p>
  
  <p>This is my jQuery so far:</p>
  
  <pre><code>$(document).ready(function () {    
      $('.clearfix').on('click', 'li a', function () {
          $(this).siblings().removeClass('active');
          $(this).addClass('active');
      });
  });
  </code></pre>
  
  <p>I'm not sure how to implement the cookie.</p>