Adding class to li after page is loaded
<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>