Utilize a dynamic approach to add the active class to navigation list items

Question

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li).

The method I initially thought of involved setting a variable on each page, assigning an ID equal to that variable for the relevant page, and then using a function to check if they match in order to apply a class to the li element.

However, I believe there must be a simpler way to accomplish this task.

<ul class="nav nav-pills right" id="div">
    <li id="home" class="active">
       <a href="index.php">Home</a>
    </li>
    <li id="search">
       <a href="search.php">Search</a>
    </li>
    <li id="contact">
      <a href="contact.php">Contact</a>
    </li>
</ul>

javascript jquery html css nav

Answer 1

Answer №1

An efficient solution is to create a separate script for each page:

$('#home').addClass('active'); // apply active class to home page

Another approach is to match the current URL with the links:

var path = window.location.pathname.substring(1);
$('.nav>li>a[href="' + path + '"]').parent().addClass('active');

Answer 2

An efficient solution is to create a separate script for each page:

$('#home').addClass('active'); // apply active class to home page

Another approach is to match the current URL with the links:

var path = window.location.pathname.substring(1);
$('.nav>li>a[href="' + path + '"]').parent().addClass('active');

Answer 3

Answer №2

A more streamlined method:

$(document).ready(function(){
    var currentPath = window.location.pathname;
    var currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1);
    $('a[href="'+ currentPage +'"]').parent().addClass('active');
});

Answer 4

A more streamlined method:

$(document).ready(function(){
    var currentPath = window.location.pathname;
    var currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1);
    $('a[href="'+ currentPage +'"]').parent().addClass('active');
});

Answer 5

Answer №3

Upon loading the page, this code will be executed:

$(document).ready(function(){
    $('li').removeClass('active');
    $('li a').each(function() {
       $found = $.contains($(this).prop("href"),location.pathname);
       if ($found) {
           $(this).closest('li').addClass('active');
           break;
        }
    });
});

Alternatively,

You can achieve this using regex:

$(document).ready(function(){
    $('li').removeClass('active');
     var regex = /[a-z]+.php/g; 
     var input = location.pathname; 
        if(regex.test(input)) {
           var matches = input.match(regex);
           $('a[href="'+matches[0]+'"]').closest('li').addClass('active');
        }
});

Ensure that the id name is similar to that of the php file.

View the demonstration here: Demo

Answer 6

Upon loading the page, this code will be executed:

$(document).ready(function(){
    $('li').removeClass('active');
    $('li a').each(function() {
       $found = $.contains($(this).prop("href"),location.pathname);
       if ($found) {
           $(this).closest('li').addClass('active');
           break;
        }
    });
});

Alternatively,

You can achieve this using regex:

$(document).ready(function(){
    $('li').removeClass('active');
     var regex = /[a-z]+.php/g; 
     var input = location.pathname; 
        if(regex.test(input)) {
           var matches = input.match(regex);
           $('a[href="'+matches[0]+'"]').closest('li').addClass('active');
        }
});

Ensure that the id name is similar to that of the php file.

View the demonstration here: Demo

Answer 7

Answer №4

Here is a solution to achieve the desired result:

// First, remove the active class from all items (if there are any)
$('.nav>li').removeClass('active');

// Next, add the active class to the current item
$('a[href='+ location.pathname.substring(1) +']').parent().addClass('active');

Answer 8

Here is a solution to achieve the desired result:

// First, remove the active class from all items (if there are any)
$('.nav>li').removeClass('active');

// Next, add the active class to the current item
$('a[href='+ location.pathname.substring(1) +']').parent().addClass('active');

Answer 9

Answer №5

One potential method involves utilizing JavaScript to locate the current list item by referencing the URL and assigning a corresponding class once the DOM is fully loaded. This can be achieved through manipulating the window.location string in combination with JQuery selectors and addClass() function.

Answer 10

One potential method involves utilizing JavaScript to locate the current list item by referencing the URL and assigning a corresponding class once the DOM is fully loaded. This can be achieved through manipulating the window.location string in combination with JQuery selectors and addClass() function.

Answer 11

Answer №6

I came across a script that adds an active (current) class to my shared menu, but I need to tweak it so that only the parent link is set, not the closest link. It works perfectly for menu items without submenus, but after clicking on a submenu item, there is no indication on the main menu once the page reloads. Here's the code snippet that requires modification:

(function( $ ) { $.fn.activeNavigation = function(selector) { var pathname = window.location.pathname; var extension_position; var href; var hrefs = []; $(selector).find("a").each(function(){ // Remove href file extension extension_position = $(this).attr("href").lastIndexOf('.'); href = (extension_position >= 0) ? $(this).attr("href").substr(0, extension_position) : $(this).attr("href");
        if (pathname.indexOf(href) > -1) {
            hrefs.push($(this));
        }
    })
    if (hrefs.length) {
        hrefs.sort(function(a,b){
            return b.attr("href").length - a.attr("href").length
        })
      hrefs[0].closest('li').addClass("current")
    }
}; })(jQuery);

Answer 12

I came across a script that adds an active (current) class to my shared menu, but I need to tweak it so that only the parent link is set, not the closest link. It works perfectly for menu items without submenus, but after clicking on a submenu item, there is no indication on the main menu once the page reloads. Here's the code snippet that requires modification:

(function( $ ) { $.fn.activeNavigation = function(selector) { var pathname = window.location.pathname; var extension_position; var href; var hrefs = []; $(selector).find("a").each(function(){ // Remove href file extension extension_position = $(this).attr("href").lastIndexOf('.'); href = (extension_position >= 0) ? $(this).attr("href").substr(0, extension_position) : $(this).attr("href");
        if (pathname.indexOf(href) > -1) {
            hrefs.push($(this));
        }
    })
    if (hrefs.length) {
        hrefs.sort(function(a,b){
            return b.attr("href").length - a.attr("href").length
        })
      hrefs[0].closest('li').addClass("current")
    }
}; })(jQuery);

Answer 13

Answer №7

If you happen to be searching on Google for a solution, here is what worked for me:

var url = window.location.href; // storing the full URL in a variable
$('a[href="'+ url +'"]').parent().addClass('active'); // finding and adding class 'active' to the parent of the link with the matching URL

This is how the HTML structure looks like:

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="http://example.com/">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="http://example.com/history"> History</a>
    </li>
</ul>

Answer 14

If you happen to be searching on Google for a solution, here is what worked for me:

var url = window.location.href; // storing the full URL in a variable
$('a[href="'+ url +'"]').parent().addClass('active'); // finding and adding class 'active' to the parent of the link with the matching URL

This is how the HTML structure looks like:

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="http://example.com/">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="http://example.com/history"> History</a>
    </li>
</ul>

Utilize a dynamic approach to add the active class to navigation list items

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Utilizing Electron API within an Angular Component

Troubleshooting problems with callback functionality in conjunction with Expressjs, JWT authentication, and Angular

Struggling with the elimination of bullet points in CSS navigation bars

Unable to establish a connection to 'X' as it is not recognized as a valid property

Achieving perfect alignment for a div that can adapt to different sizes and

Console Error: Attempting to set the 'className' property of null object results in an

In order to showcase an image ahead of another (stay tuned),

Trigger a series of child functions upon clicking the parent button

The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

"How can I adjust the positioning of a Materialize modal to be at the top

Is it possible to integrate Wavify with React for a seamless user experience?

Save the raw InputMask data in Formik with Material-UI

Step-by-step guide on creating a monochrome version of an image using automation

Exploring the chosen choice in the Material Design Lite select box

Developing an interactive URL in an HTML page for a Flask web application

Issues with CSS transitions/animations not functioning properly across different browsers

The name field in the request body is currently undefined

The length function appears to be signaling an unanticipated error

Issue with Discord.js voice connection destruction函数

The value of a select box cannot be retrieved until it has been clicked on