title: Adding class to li after page is loaded
body: <p>I have a nav bar with links that are loaded from a database by a foreach loop, the nav bar is static so only the content in changing. I want to add an 'Active' class to the link when the page is loaded an active. </p>
  
  <p>I've tried to simply add class when an <code>li</code> element is clicked, but the class disappears when the page is reloading.</p>
  
  <p>Here is my HTML (it's rendered by PHP foreach loop so it's not hard coded as it looks)</p>
  
  <pre><code>&lt;div class="sidebar-menu"&gt;
    &lt;ul class="sidebar-nav"&gt;
      &lt;li class="icon_links"&gt;
        &lt;a href="/home" class="links"&gt;
          &lt;div class="icon"&gt;
            &lt;i class="fa fa-tasks" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="title"&gt;Dashboard&lt;/div&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="icon_links"&gt;
        &lt;a href="/messaging" class="links"&gt;
          &lt;div class="icon"&gt;
            &lt;i class="fa fa-comments" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="title"&gt;Messaging&lt;/div&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(document).ready(function() {
    var selector = '.sidebar-nav li';
    $(selector).on('click', function() {
      $(selector).removeClass('active');
      $(this).addClass('active');
    });
  });
  </code></pre>