title: how do i add an active class on the parent li when i select an item on it. using javascript
body: <pre><code>$(function() {
      var pgurl = window.location.href.substr(window.location.href
              .lastIndexOf("/") + 1);
      $("#nav ul li a").each(function() {
          if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
              $(this).addClass("active");
      });
  
  });
  </code></pre>
  
  <p>here is the js that I am using to put active class on the li.
  it works fine, but when I am selecting an item (the child) inside my sorta like dropdown list. it will get an active class, but i also want the parent li to get an active class also.</p>
  
  <p>
  </p>
  
  <pre><code>&lt;%@include file="header.jsp"%&gt;
  &lt;div id="nav"&gt;
  
      &lt;ul&gt;
          &lt;li class="headerFont"&gt;&lt;a href="index.jsp"&gt;&lt;b&gt;HOME&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="headerFont"&gt;&lt;a href="link.jsp"&gt;&lt;b&gt;HOW TO
                      DONATE&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="headerFont"&gt;&lt;a class="tangina" href="#"&gt;&lt;b&gt;DONATE&lt;/b&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li class="headerFont"&gt;&lt;a href="link2.jsp"&gt;&lt;b&gt;DONATION
                              CENTER &lt;img id="arrow" src="img/arrow.png" /&gt;
                      &lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="headerFont"&gt;&lt;a href="link3.jsp"&gt;&lt;b&gt;HOW ELSE
                              CAN I DONATE? &lt;img id="arrow" src="img/arrow.png" /&gt;
                      &lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
          &lt;li class="headerFont"&gt;&lt;a href="#"&gt;&lt;b&gt;GET DONORS&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="headerFont"&gt;&lt;a href="#"&gt;&lt;b&gt;ABOUT BLOOD&lt;/b&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li class="headerFont"&gt;&lt;a href="Bfacts.jsp"&gt;&lt;b&gt;BLOOD
                              FACTS &lt;img id="arrow" src="img/arrow.png" /&gt;
                      &lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="headerFont"&gt;&lt;a href="news.jsp"&gt;&lt;b&gt;NEWS &lt;img
                              id="arrow" src="img/arrow.png" /&gt;&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="headerFont"&gt;&lt;a href="faqs.jsp"&gt;&lt;b&gt;FAQS &lt;img
                              id="arrow" src="img/arrow.png" /&gt;&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
          &lt;li class="headerFont"&gt;&lt;a href="about.jsp"&gt;&lt;b&gt;ABOUT US&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="headerFont"&gt;&lt;a href="login.jsp"&gt;&lt;b&gt;LOG IN&lt;/b&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li class="headerFont"&gt;&lt;a href="#"&gt;&lt;b&gt;REGISTER &lt;img
                              id="arrow" src="img/arrow.png" /&gt;&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  &lt;div class="triangle"&gt;&lt;/div&gt;
  &lt;div class="triangle2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
  </p>