treehouse : what would you like to learn today?
Web Design Web Development iOS Development

jQuery - Target Active Tab Link?

  • 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
  • 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.
  • @WCMiller good work! :D
  • 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 ;)
  • @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. :)