Q:

how do i add an active class on the parent li when i select an item on it. using javascript

$(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");
    });

});

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.

<%@include file="header.jsp"%>
<div id="nav">

    <ul>
        <li class="headerFont"><a href="index.jsp"><b>HOME</b></a></li>
        <li class="headerFont"><a href="link.jsp"><b>HOW TO
                    DONATE</b></a></li>
        <li class="headerFont"><a class="tangina" href="#"><b>DONATE</b></a>
            <ul>
                <li class="headerFont"><a href="link2.jsp"><b>DONATION
                            CENTER <img id="arrow" src="img/arrow.png" />
                    </b></a></li>
                <li class="headerFont"><a href="link3.jsp"><b>HOW ELSE
                            CAN I DONATE? <img id="arrow" src="img/arrow.png" />
                    </b></a></li>
            </ul></li>
        <li class="headerFont"><a href="#"><b>GET DONORS</b></a></li>
        <li class="headerFont"><a href="#"><b>ABOUT BLOOD</b></a>
            <ul>
                <li class="headerFont"><a href="Bfacts.jsp"><b>BLOOD
                            FACTS <img id="arrow" src="img/arrow.png" />
                    </b></a></li>
                <li class="headerFont"><a href="news.jsp"><b>NEWS <img
                            id="arrow" src="img/arrow.png" /></b></a></li>
                <li class="headerFont"><a href="faqs.jsp"><b>FAQS <img
                            id="arrow" src="img/arrow.png" /></b></a></li>
            </ul></li>
        <li class="headerFont"><a href="about.jsp"><b>ABOUT US</b></a></li>

        <li class="headerFont"><a href="login.jsp"><b>LOG IN</b></a>
            <ul>
                <li class="headerFont"><a href="#"><b>REGISTER <img
                            id="arrow" src="img/arrow.png" /></b></a></li>
            </ul></li>

    </ul>

</div>
<div class="triangle"></div>
<div class="triangle2"></div>

A:

Change this line
$(this).addClass("active");

to
$(this).closest('li').addClass('active');

The closest operator tells jQuery to look for the nearest li in the DOM tree.  In this case, the nearest parent.

A better href string slicing method:
**Here's a fiddle
And here's a better (read: more accurate) string slicing function:
/* start of code...*/
var pgurl = sliceString(window.location.href);
/*... rest of code */

function sliceString(s) {
    s = s.split("").reverse().join("");
    if (s.indexOf('/') === 0){
        s = s.substring(1);
    }
    s = s.substring(0, s.indexOf('/'));
    return s.split("").reverse().join("");
}

This will remove any trailing / character, and more accurately select the end-of-string url you're looking for.

Edit, the second:
Alright, if you want all parents to be selected then you can use the parents() selector like so:
$(this).parents('li').addClass('active');

Another fiddle example

Final edit:
The third solution I provided does select the li that has the a element which was clicked, as well as all its parent li elements.  Keep in mind that the top-level li (headerFont in your provided example) contains all the child li items as well, not just the one that was clicked.  If you only want the text selected for DONATE, then add that to your CSS like
nav > ul > li.active b,
nav > ul > li > ul li.active {
  /* ACTIVE STYLES */
}

Those two CSS selectors combined will select the top-level b element in your nav, as well as an non-top-level li element that was clicked.

