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

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

What is the best way to ensure that any modifications made to an item in a table are appropriately synced

Working with color fills in Three.js shapes

`Arranging Widget Boxes in a Vertical Layout`

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

JavaScript Bingo Game - Create Interactive Cell Selection

Using HTML5 to Define the Size of a File Upload Button

Changing the color of a Highcharts series bar according to its value

Transforming JSON data into a dynamic Tableview

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Form validation errors were detected

What causes the non-reachable part of the ternary operator to be evaluated prior to updating the state with setTimeout?

Update the page with AJAX-loaded content

Using the `find()` method in a loop of Mongoose iterate

Show only half of the Google Charts

What are the steps to establish a Z-axis coordinate system in three.js?

Angularjs: The Art of Loading Modules

Troubleshooting Problem with Web Forms and Bootstrap Form Design

A skeleton framework lacking a data storage backend

Do factory and service represent examples of Declarative Programming within AngularJS?