urls - How to make menu items active based on hash

I'm creating a Wordpress portfolio site using the Simone theme. I have three menu items that link to the same page but with different hashes:

tovly/work/#work-all-work

tovly/work/#work-photos

tovly/work/#work-videos

The problem is all three menu items are set as active no matter what hash is in the url. At all three of the above urls, the navigation menu looks like this:

What I want is for the navigation bar at tovly/work/#work-all-work to look like this:

I also want the same effect at tovly/work/#work-photos and tovly/work/#work-videos.

How can I do this?

I'm creating a Wordpress portfolio site using the Simone theme. I have three menu items that link to the same page but with different hashes:

tovly/work/#work-all-work

tovly/work/#work-photos

tovly/work/#work-videos

The problem is all three menu items are set as active no matter what hash is in the url. At all three of the above urls, the navigation menu looks like this:

What I want is for the navigation bar at tovly/work/#work-all-work to look like this:

I also want the same effect at tovly/work/#work-photos and tovly/work/#work-videos.

How can I do this?

• urls
• navigation
• menus

Share Improve this question edited Jan 4, 2019 at 17:45 Andy Macaulay-Brook 3,85933 gold badges2020 silver badges4545 bronze badges asked Oct 20, 2014 at 0:57 Tovly DeutschTovly Deutsch 12111 silver badge44 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

This can be accomplised fairly easy by checking the URL then setting the appropriate link to active.

That can be accomplished by the following...

var hash = window.location.hash.substr(1);  // Get the text after the hash
$('a[href="#' + hash + '"]').addClass('active'); // Set the correct link to active

However, there are some things to consider. Someone can access this page from a link that already has a hash, so are code needs to run on page load. Also, the hash can change from within the page so we need to check everytime a link with a # is clicked.

Here is my working/tested example...

$(document).ready(function () {

    function setActive() {
        setTimeout(function () {
            var hash = window.location.hash.substr(1);

            if (hash) {
                $('a[href*="#"]').removeClass('active');
                $('a[href="#' + hash + '"]').addClass('active');
            }
        }, 15);
    }

    setActive(); // On Page Load

    $('a[href*="#"]').click(function () { // On link click
        setActive();
    });

});

Note: the setTimeout is used because there is a slight delay from when a link is clicked and the actual URL is updated

Note 2: This will set and unset an active class directly on the anchor. You may want to set the class on a parent element, like a li or div. You can do that by adding .parent() after the add and remove class selectors.

For example...

$('a[href*="#"]').parent().removeClass('active');
$('a[href="#' + hash + '"]').parent().addClass('active');

Try combination of setInterval method and window.location.hash. This is not tested, but something like this should be useful:

jQuery(function($) {
    setInterval(function() {
        var tag = window.location.hash;
        $('.main-menu ul li').removeClass('active-menu');
        $('.main-menu ul li#' + tag).addClass('active-menu');
    }, 100);
});

You need to change menu class and structure in line 4 and 5.