title: How to add css class to particular link in a group of links?
body: <p>I have 5 links, I want to add <code>active</code> class to particular link.</p>
  
  <p>For example</p>
  
  <pre><code>&lt;div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar"&gt;
      &lt;button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()"&gt;Close &amp;times;&lt;/button&gt;
      &lt;a href="#" class="w3-bar-item w3-button"&gt;Create User&lt;/a&gt;
      &lt;a href="#" class="w3-bar-item w3-button"&gt;Security&lt;/a&gt;
      &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 3&lt;/a&gt;
      &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 4&lt;/a&gt;
      &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 5&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>If I want to add <code>active</code> class to second link(Security). How can I add.</p>
  </blockquote>
  
  <pre><code>$(document).ready(function () {
  
      //ADD Active in SideNav bar
      $('.w3-sidebar a').click(function (e) {
          e.preventDefault();
          $('.w3-sidebar a').removeClass('active');
          $(this).addClass('active');
      })
  });
  </code></pre>
  
  <p>I tried the above code. But the problem is. When page get reload. That active is not appearing. </p>