How Can I Add an 'Active' Class to My Navigation Menu to Highlight the Current Page?

Add Active Navigation Class to Reflect Current Page

In web development, it's common to highlight the menu item representing the currently active page. To achieve this, you can add an "active" class to the corresponding menu list item dynamically. Here's how you can do it using JavaScript:

JavaScript Code:

<br>$(function(){<pre class="brush:php;toolbar:false">var current = location.pathname;
$('#nav li a').each(function(){
    var $this = $(this);
    // if the current path is like this link, make it active
    if($this.attr('href').indexOf(current) !== -1){
        $this.addClass('active');
    }
})

})

Explanation:

This code snippet achieves the desired result by binding an event handler to the document's ready event (which triggers when the page has fully loaded). It then iterates through each link in the menu and checks if its href attribute matches the current page's pathname. If a match is found, the "active" class is added to the matching link, visually indicating that the user is on the corresponding page.

Applying the Code:

To implement this functionality on your website, simply copy and paste the JavaScript code into your page's header. Ensure that the code is within the <script></script> tags and that you include the jQuery library as a prerequisite.

The above is the detailed content of How Can I Add an 'Active' Class to My Navigation Menu to Highlight the Current Page?. For more information, please follow other related articles on the PHP Chinese website!