title: How to assign a class "active" to the li element based on current URL and click event using jQuery or JavaScript
body: <p>I am trying to create a menu where a class "active" is assigned to the page whenever it's selected and loaded. Right now it is applied only to the index page by default.</p>
  
  <p>My menu snippet:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
       &lt;li class="active"&gt;&lt;a href="http://localhost/wp/index.php"&gt;Main&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="http://localhost/wp/news"&gt;News&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="http://localhost/wp/contacts"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>