Adding CSS Class using jQuery

Question

Below I have included the jquery code I am using to add a css class to the link in the side column that equals the active url, but it's not working, and at some point it did.

Link: http://www.liquidcomma.com/portfolio/project/TSF_Robot_Ad/1/

<script type="text/javascript">
$(document).ready(function(){
      $("ul.right_submenu > li > a").each(function() {
            if ($(this).attr("href") == location.href)
            {
                  $(this).addClass("CurrentProject");
            });
};
</script>

I guess the issue is here: $(this).attr("href") == location.href - one of the urls may be normalized / resolved — amartynov
– amartynov, Commented Nov 1, 2009 at 17:56

joshperry · Accepted Answer · 2009-11-01 18:44:40Z

5

Well, besides that code missing braces and parens it can be done much simpler:

$(function(){
    $("a[href^='" + location.href + "']").addClass("CurrentProject");
});

edited Nov 1, 2009 at 18:44

answered Nov 1, 2009 at 17:56

joshperry

42.5k16 gold badges94 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joshperry Over a year ago

I've made a change to address Miguel's concern, the '^=' in the selector will now only match href's that begin-with the current location URL.

Aaron Over a year ago

Exchange ^= with $= .. Begins with and Ends with respectively.

Darin Dimitrov · Accepted Answer · 2009-11-01 17:56:42Z

0

You have unclosed braces in your script:

$(document).ready(function(){
    $("ul.right_submenu > li > a").each(function() {
        var a = $(this);
        if (a.attr('href') == location.href) {
            a.addClass("CurrentProject");
        }
    });
});

and you could rewrite your script like this:

$('ul.right_submenu > li > a[href=' + location.href + ']')
    .addClass('CurrentProject');

answered Nov 1, 2009 at 17:56

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

1 Comment

jsuissa Over a year ago

Hi, If you go to liquidcomma.com and you see the Case Studies section I tried the shorter code you provided as an alternative solution, but it nothing seems to be happening. This is strange since both example you provided seem to be perfect.

Miguel Ventura · Accepted Answer · 2009-11-01 17:59:32Z

0

Following your link, my location.href goes to http://www.liquidcomma.com/portfolio/project/TSF_Robot_Ad/1/ but your project link in the page points to http://www.liquidcomma.com/portfolio/project/trade_show_fabrications/1... that will make attr('href') != location.href.

In the other links, location.href will be ending with a slash whereas the link's href will not.

You should use something else to match your project other than the href attribute, if you expect it to change in the future (and it probably will).

answered Nov 1, 2009 at 17:59

Miguel Ventura

10.5k3 gold badges34 silver badges41 bronze badges

Collectives™ on Stack Overflow

Adding CSS Class using jQuery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related