How do I use .addClass on an anchor tag? [closed]

Question

I've been stumped by this all day. My page design needs to add a class to the 'a' tag of the active page, which creates a tab to let the user know that is the page they are currently on. I have been able to apply the class when I use e.preventDefault(), but this stops the link from going to the assigned href.

When I don't use the e.preventDefault(), the class does get assigned, but only for half a second before the new page loads and it defaults back to it's original HTML. The code is as follows:

$(document).ready(function () {
    $(".navigation a").click(function (e) {

$(".navigation a").removeClass("act");
$(this).addClass("act");

});
})

And here is the HTML:

<div class="navigation">
    <a class="nav_item class1" href="/url/">link text</a>
</div><!--  navigation  -->
<div class="navigation">
    <a class="nav_item class2" href="/url/">link text</a>
</div><!--  navigation  -->
<div class="navigation">
    <a class="nav_item class3" href="/url/">link text</a>
</div><!--  navigation  -->

Any help would be appreciated. Thanks!

Answer 1

You can't have your cake and eat it too. Either you want to modify the CURRENT page (adding a class to an object) or you want the process the link and go to a new page. You have to choose one or the other.

If you want to go to the new URL and have the new page show the added class, then you need to put code in the new page that examines its state when loaded and adds the class there to the appropriate tag. There are at least three ways that you could do this in the new page:

1. Examine the URL path/filename and add the class to the appropriate tab
2. In the original page, add a query parameter to the link so when the new page is loaded, it has the query parameter that can be examined in that page to add the class to the appropriate tab
3. Use a fragment identifier #xxxx at the end of the URL in the same way as the previous option.