2

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.com/work/#work-all-work

tovly.com/work/#work-photos

tovly.com/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.com/work/#work-all-work to look like this:

enter image description here

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

How can I do this?

0

2 Answers 2

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');
0

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.

1
  • I dont think using setInterval is a great idea, your code will check for a new hash 10 times per second. I think you should just check when needed. Jan 4, 2019 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.