title: How to underline active webpage in drop down menu?
body: <p>I'm building a webpage using bootstrap and in my navigation bar, I have three drop down menus. I want to program the page so that the currently loaded page and its corresponding drop down menu are underlined or highlighted so that the user knows which page they are on. </p>
  
  <p>In my html file, the drop down menu navbar is as follows:</p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#'&gt;item1&lt;/li&gt;
       &lt;li&gt;&lt;a href='#'&gt;item2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And in my css file, the activePage class is defined as follows:</p>
  
  <pre><code>.activePage {
       text-decoration: underline;
  }
  </code></pre>
  
  <p>In my javascript file, I have tried to do the following:</p>
  
  <pre><code>$('.dropdown-menu a').click(function(){
       $('.dropdown-menu a').removeClass('activePage');
       $(this).addClass('activePage');
  });
  </code></pre>
  
  <p>However the above does not underline the current page I am on in the drop down menu. I find it peculiar because when I do the following:</p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a class="activePage" href="#'&gt;item1&lt;/li&gt;
       &lt;li&gt;&lt;a href='#'&gt;item2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The first item is successfully underlined.</p>