Add class to an element if on same url

Question

I am trying to get the following bit of code to work, but I seem to be missing something

var dom = document.URL;
$("a[href=dom]").addClass("active");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
    <a href="http://example.com">
        <i class="fa fa-home"></i>
        Home
    </a>
</li>
<li>
    <a href="http://example.com/about">
        <i class="fa fa-info"></i>
        About
    </a>
</li>

What's supposed to happen is when at http://example.com the class active will be added to the first a element, if at http://example.com/about then the second a will get the class.

I used javascript's alert to make sure I was getting the right URL, and it is as it shows in href, however what I have above doesn't work. I have tried the Javascript responses given here but they don't work either.

You just need to concatenate the variable: $('a[href="' + dom + '"]').addClass("active"); — Rory McCrossan
– Rory McCrossan, Commented Feb 24, 2016 at 17:00
you need to use window.location.href instead, and remove the class from all of those anchors prior to setting the class, otherwise they'll all have it — Rob Scott
– Rob Scott, Commented Feb 24, 2016 at 17:01
Not sure why this was downvoted. Seemed like a well put together question to me especially from a newer stack overflow member. — James Wilson
– James Wilson, Commented Feb 24, 2016 at 17:05

Rory McCrossan · Accepted Answer · 2016-02-24 17:03:29Z

1

$("a[href=dom]").addClass("active");

should be

$("a[href=" + dom + "]").addClass("active");

You're mixing in a variable with a string. Also, I would recommend just adding a class to the body and targeting the current page like that. It's much more reusable.

edited Feb 24, 2016 at 17:03

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Feb 24, 2016 at 17:00

abrosis

4147 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Add class to an element if on same url

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related