JQuery Script to highlight current page’s navigation link


This is a small script used for highlighting the current page’s navigation link. Here you can also specify the scope by just removing “*” with your own expression. Here I am adding class “current” to the navigation link wich can be used for styling the link.

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("current")
//add your own logic here if needed
})

,

  1. #1 by Dan - May 17th, 2010 at 19:50

    Hi, thanks for the code but unfortunately I can’t get it to work.

    My nav is sitting in a nav_container and the UL has an ID of ‘nav’

    When you say:

    “specify the scope by just removing “*”

    What exactly do you mean (in laymens terms)?

    Thanks, Dan

    • #2 by Nishanth - July 16th, 2011 at 12:51

      * in jQuery means all, in your case if id is nav_container you can use #nav_container

  2. #3 by Chris - December 23rd, 2010 at 00:38

    window.location.pathname would be better than window.location.href

  3. #4 by Towfiq I. - April 24th, 2011 at 01:12

    Nice. Thanks It helped…. :)

(will not be published)
  1. No trackbacks yet.