title: Trigger active class of parent link when on child link page
body: <p>I have the javascript code below to put my parent menu item to class active when I'm on the page for example <a href="https://stackoverflow.com/questions/">https://stackoverflow.com/questions/</a> it works. But I also wanna put the parent menu item to class active when I'm at the subpages/child menu item like <a href="https://stackoverflow.com/questions/ask/">https://stackoverflow.com/questions/ask/</a>, may I know how to do that?</p>
  
  <p>Example I'm at this page <a href="https://stackoverflow.com/questions/ask/">https://stackoverflow.com/questions/ask/</a>, how to I get the URL like this <a href="https://stackoverflow.com/questions/">https://stackoverflow.com/questions/</a>, without the /ask so that I can have the parent menu item (question) to be in active class when I'm at the child page of question which is (ask).</p>
  
  <p>The code below only works if I'm at <a href="https://stackoverflow.com/questions/">https://stackoverflow.com/questions/</a>, but if I'm at the child page <a href="https://stackoverflow.com/questions/ask/">https://stackoverflow.com/questions/ask/</a>, parent link (<a href="https://stackoverflow.com/questions/">https://stackoverflow.com/questions/</a>) doesn't change to active class.</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="/"&gt;&lt;h5&gt;Home&lt;/h5&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="/online/" class="dropdown-toggle " role="button" aria-expanded="false"&gt;&lt;h5&gt;Online&lt;span class="caret"&gt;&lt;/span&gt;&lt;/h5&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu" role="menu"&gt;
                      &lt;li&gt;&lt;a href="/online/history/"&gt;History&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/online/science/"&gt;Science&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/online/math"&gt;Mathematics&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/online/english/"&gt;English&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
  
   var url = window.parent.location.href;
        $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
  
        $('ul.nav a').filter(function() {
          return this.href == url;
        }).parent().addClass('active');
  
  
  
  &lt;/script&gt;
  </code></pre>