Adding CSS Class using JQuery

Question

Hi,

Below I have included the jquery code I am using to try 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. Thanks in advance for any help you can provide.

Link: http://www.liquidcomma.com/portfolio/project/TSF%5FRobot%5FAd/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>

Answer 1

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');

Answer 2

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

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

Answer 3

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).

Answer 4

Hi,

I fixed the braces issue in the Case Studies section.

But if you click on a link it still doesn't work.

The URLs are fairly permanent and there are shorter ways doing this, but I still don't get why the code I have now won't work.

Thanks.