Grow your CSS skills. Land your dream job.

Last updated on:

Highlight All Links To Current Page

$(function(){
       $("a").each(function(){
               if ($(this).attr("href") == window.location.pathname){
                       $(this).addClass("selected");
               }
       });
});

This function will add the class "selected" to any links (even relative) that point to the current page.

Comments

  1. Permalink to comment#

    I’m looking for a script that has a menu that shows what part of the page ur on. EX:

    LINK 1 LINK2 LINK3 (bold cause ur on that area)

    LINK 3 Area

  2. This is exactly what I’m looking for, but I’m unsure how to deploy it…
    Does this need to go in Script tags in the Head section of my page?
    How do I define the “selected” class in my styles.css sheet?

  3. Ken-chan

    How can I edit this line:

    if ($(this).attr(“href”) == window.location.pathname){

    into something that may result to true as long as the pathname is found. I need an alternative for the == operators. Is there something in JS that emulates SQL’s “LIKE”?

    Thanks.

  4. Richard
    Permalink to comment#

    Thank you very much for this, there are hundreds of scripts about that do this , but this is the first one that actually works, does what it says on the tin. You are a genious, and have saved me a lot of pain, Thanks again!!!!!!!!!

  5. Ah, this is so difficult! I don’t understand any of it :(

    I guess I’ll just have to pay someone to keep working on my site.

  6. Rai
    Permalink to comment#

    Mmm, donĀ“t sure why but is not working for me.
    I think that wordpress make this automatically adding .current to the currents pages.

  7. Permalink to comment#

    This looks to be the most succinct code I’ve come across for this. But I still can’t get it to work. I’m working on a Childtheme of Twenty Ten. If you have any tips on why it’s not working would love to hear it.

  8. Chris Bowyer

    Above code didn’t work for me, but this code I found did…

    
    $(function() {
    	$("#menu a").each(function() {
    		if (this.href == window.location) {
    			$(this).css("color", "#FF0");
    		};
    	});
    });
    
    
    • You can reference http://stackoverflow.com/questions/5874652/prop-vs-attr for more about prop vs attr.

    • Jesus
      Permalink to comment#

      This code worked for me as well.

    • Ubong
      Permalink to comment#

      Works like a charm> thank Chris

    • Maulik
      Permalink to comment#

      Thanks sir.. it is really working..! :-D
      thanks once again.

  9. for anyone having trouble implementing this, all you need to do is:

    1. place the code snipped inside in the head of your web document or external .js file

    2. create your selector class in your css file.
    .selected{color:#F00;} or whatever you like.

  10. scooter29
    Permalink to comment#

    Thanks Chris Bowyer.

    • scooter29
      Permalink to comment#

      I just mix both

      $(function() {
      $(“body a”).each(function() {
      if (this.href == window.location) {
      $(this).addClass(“selected”);
      };
      });
      });

  11. Permalink to comment#

    sometimes (if both classes have same attribute, this case “background”) you should make your css code with !important.

    for example; link with class somelink

    css code;

    a.somelink {
    background:white;
    }

    .selected {
    background:red !important;
    }

    with “!important” , red bg will pass the white bg. and when selected you will see red. if important not given you will see white bg, that case you think code not works ;)

  12. Permalink to comment#

    This worked like a charm in my custom Tumblr-theme, and the code is a lot sexier than the other snippets I found on the webz. Did not even break a sweat.

    Sweeet.

        $(function() {
            $("#mainNav a").each(function(){
                if ($(this).attr("href") == window.location.pathname) {
                    $(this).parent().addClass("current");
                }
            });
        });
    

    Used the parent-method to attach .current to ‘s parent .

  13. Permalink to comment#

    This worked like a charm in my custom Tumblr-theme, and the code is a lot sexier than the other snippets I found on the webz. Did not even break a sweat.

    Sweeet.

        $(function() {
            $("#mainNav a").each(function(){
                if ($(this).attr("href") == window.location.pathname) {
                    $(this).parent().addClass("current");
                }
            });
        });
    

    Used the parent-method to attach .current to a’s parent li.

  14. Why use each() when addClass() itself iterates over each of the selected elements:

    $('#mainNav a').addClass(function(){
        return this.href == window.location.href ? 'current' : '';
    });
    

    Admittedly the ternary/conditional-operator could be replaced by a simple if/else, for simplicity, but the above is a little more concise, and just as readable I think.

    • Wayne
      Permalink to comment#

      David, this works perfect for me! Verrrrrrry nice!

      For the benefit of others (newbies like me), this is what I did: Since I am using ‘thispage’ instead of ‘current’ for my class, I changed ‘current’ to ‘thispage’ in the code, like so:

      $(function() {
      $('#mainNav a').addClass(function(){
          return this.href == window.location.href ? 'thispage' : '';
      });
      });
      

      Then, I inserted it in my page just before the </header>, making sure I wrapped the thing in opening and closing script tags and added a CDN like Google’s (before the function), like so:

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script>
      $(function() {
      $('#mainNav a').addClass(function(){
          return this.href == window.location.href ? 'thispage' : '';
      });
      });
      </script>
      

      And then, in my main.css file, I added:

      #mainNav a:hover, #mainNav a:active, #mainNav a:focus, #mainNav a.thispage {
          color: #FF86FF;
          text-decoration: none;
      }
      

      And, PRESTO! it works like a champ!

    • Luis A Melendez
      Permalink to comment#

      Thank you David! I been looking for this solution for a long time without success, and now, I can finally say found it. Thanks again.

Leave a Comment

Current day month ye@r *

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