Grow your CSS skills. Land your dream job.

jQuery – Target Active Tab Link?

  • # February 27, 2012 at 5:29 pm

    Hi!

    Using LocalScroll, I’ve been able to make the navigation, so that when you click on a link, that link is highlighted with a class of “current_page_item”, but the problem is, when a user is taken to a link like this:
    http://sayredesign.com/clients/designpoint/home/#portfolio

    Without doing anything, the link in the sidebar doesn’t have a class of “current_page_item”, in this case, it would be bold and green. Right now, the script I’m using only adds the class when that link is clicked. Is there anything I can do?

    Appreciated,
    Steph

    # February 28, 2012 at 5:13 pm

    When you load the page, you could get whatever hash you may have, and use that to put the class on the appropriate item. It would look something like this:

    var hash = window.location.hash;
    if(hash){
    $('a[href="' + hash + '"]').addClass("current_page_item");
    };

    I haven’t tested this, but that should work if you fire it off on page load.

    # February 28, 2012 at 5:26 pm

    @WCMiller good work! :D

    # February 29, 2012 at 6:19 am

    Hmm, I read the question a bit differently. I’m guessing you want the menu to update as you scroll down the page as well?

    Check out these jQuery plugins:
    * Waypoints
    * VisualNav

    Edit: LOL nevermind, I didn’t look at your page… So, WCMiller has the answer you need then! But I think adding the ability to use the mouse wheel would be nice ;)

    # March 3, 2012 at 5:38 pm

    @WCMiller, YAY! I knew there was some way to do it. Thank you, thank you, thank you!

    @Mottie – Yes, but I have been able to get the menu to update as I go from one page to the next. Oh mouse wheel? I never thought of that. Thank you! I’ll take a look, I see Chris has an article on that. :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".