admin管理员组

文章数量:1302582

$(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>

$(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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 8, 2014 at 17:09 JAAulde 19.6k55 gold badges5656 silver badges6464 bronze badges asked Dec 8, 2014 at 17:05 Peter YambaoPeter Yambao 3111 gold badge11 silver badge44 bronze badges 7

• Have you tried the jQuery .parent() option? i.e. $(this).parent().addClass('active'); – rfornal Commented Dec 8, 2014 at 17:08
• Check this out: api.jquery./closest – emerson.marini Commented Dec 8, 2014 at 17:08
• $(this).closest("li").addClass('active'). inside your $("#nav ul li a").each(function(){ if(...){... //Here } }); – Vedant Terkar Commented Dec 8, 2014 at 17:09
• yeah but i think Im doing it wrong. since Im a newbie in js. where do I add it? – Peter Yambao Commented Dec 8, 2014 at 17:10
• I tried "$(this).closest("li").addClass('active')." yet the parent li is not getting an active class still. – Peter Yambao Commented Dec 8, 2014 at 17:12

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

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 bined will select the top-level b element in your nav, as well as an non-top-level li element that was clicked.

$(this).parent().addClass('active');

本文标签：