What is the best way to apply an active class to the parent li element when selecting an item within it? I want to achieve this effect

Question

What is the best way to apply an active class to the parent li element when selecting an item within it? I want to achieve this effect

$(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 JavaScript code I am using to add the active class to the list item. It works perfectly, but I want the parent list item to also get an active class when selecting an item within a dropdown list.

<%@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

Answer 1

Answer №1

Revise this line

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

to

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

Using the closest method instructs jQuery to search for the closest li element in the DOM hierarchy. This targets the nearest parent.

An enhanced approach to slicing `href` strings:

**Check out this fiddle

Here is a more precise 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("");
}

With this method, any trailing / character is eliminated, providing a more accurate retrieval of the target url.

Modification, the second:

If you want to select all parents, you can utilize the parents() selector as follows:

$(this).parents('li').addClass('active');

Another demo example

Final touch:

The third solution provided does identify the li containing the clicked a element, along with its parent li elements. Note that the top-level li (headerFont in your demonstration) includes all child li items, not just the clicked one. If you only wish to style the text for DONATE, adjust your CSS like so:

nav > ul > li.active b,
nav > ul > li > ul li.active {
  /* ACTIVE STYLES */
}

These CSS selectors combined will target the top-level b element in your navigation, as well as any non-top-level li element that was clicked.

Answer 2

Revise this line

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

to

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

Using the closest method instructs jQuery to search for the closest li element in the DOM hierarchy. This targets the nearest parent.

An enhanced approach to slicing `href` strings:

**Check out this fiddle

Here is a more precise 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("");
}

With this method, any trailing / character is eliminated, providing a more accurate retrieval of the target url.

Modification, the second:

If you want to select all parents, you can utilize the parents() selector as follows:

$(this).parents('li').addClass('active');

Another demo example

Final touch:

The third solution provided does identify the li containing the clicked a element, along with its parent li elements. Note that the top-level li (headerFont in your demonstration) includes all child li items, not just the clicked one. If you only wish to style the text for DONATE, adjust your CSS like so:

nav > ul > li.active b,
nav > ul > li > ul li.active {
  /* ACTIVE STYLES */
}

These CSS selectors combined will target the top-level b element in your navigation, as well as any non-top-level li element that was clicked.

Answer 3

Answer №2

$(this).closest().toggleClass('active');

Answer 4

$(this).closest().toggleClass('active');

What is the best way to apply an active class to the parent li element when selecting an item within it? I want to achieve this effect

Answer №1

An enhanced approach to slicing `href` strings:

Modification, the second:

Final touch:

Answer №2

Similar questions

When utilizing a node.js TCP socket to receive and send modified data, the functionality only operates successfully on the initial attempt

AngularJS: Embedding a webpage within a <div> container

Reducing Time Series Data: Comparing Average vs Largest-Triangle-Three-Buckets Technique

Having trouble finding the correct output when searching in the table using regex

Retrieving server information using AJAX in React

How to filter an array in Angular 4 without the need for creating a new array and then displaying the filtered results within the same

submit multiple images simultaneously

Updating an object with AngularJS

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

Using Express.js to serve simple SVG files (Technique involving Cheerio.js)

React throws a "ReferenceError: indexedDB is not defined" but surprisingly, it still manages to function properly

Three columns with the first column having a flexible width

Flashing text compatibility across all browsers

Accessing a distinct element of e.parameter

take a paragraph element outside of a container div

I am having trouble grasping the concept of CSS and the first-child selector

Deactivate a div based on a Razor variable in ASP.NET MVC4

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

Error code E401 is being encountered with npm, indicating either an incorrect password has been provided or the

Initializing start scripts in the package.json file

What is the best way to apply an active class to the parent li element when selecting an item within it? I want to achieve this effect

Answer №1

An enhanced approach to slicing href strings:

Modification, the second:

Final touch:

Answer №2

Similar questions

When utilizing a node.js TCP socket to receive and send modified data, the functionality only operates successfully on the initial attempt

AngularJS: Embedding a webpage within a <div> container

Reducing Time Series Data: Comparing Average vs Largest-Triangle-Three-Buckets Technique

Having trouble finding the correct output when searching in the table using regex

Retrieving server information using AJAX in React

How to filter an array in Angular 4 without the need for creating a new array and then displaying the filtered results within the same

submit multiple images simultaneously

Updating an object with AngularJS

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

Using Express.js to serve simple SVG files (Technique involving Cheerio.js)

React throws a "ReferenceError: indexedDB is not defined" but surprisingly, it still manages to function properly

Three columns with the first column having a flexible width

Flashing text compatibility across all browsers

Accessing a distinct element of e.parameter

take a paragraph element outside of a container div

I am having trouble grasping the concept of CSS and the first-child selector

Deactivate a div based on a Razor variable in ASP.NET MVC4

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

Error code E401 is being encountered with npm, indicating either an incorrect password has been provided or the

Initializing start scripts in the package.json file

An enhanced approach to slicing `href` strings: