I am trying to isolate and add a class to a clicked anchor tag. The tags are getting pulled from a Wordpress loop. I can write JQuery to remove the "static" class, but it is removing the class from all tags in the div rather than just the one clicked, adding the active class for a split second, then all classes are removed when the page reloads with the new set of projects.

Here is the WP loop

<div class="more">
    <a class="static" href="<?php bloginfo('template_url'); ?>/work/">ALL</a>           
    <?php
    foreach ($tax_terms as $tax_term) {
    echo '<a class="static" href="' . esc_attr(get_term_link($tax_term, $taxonomy)) . '" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a>';
    } ?>
</div>

Generates this html:

<div class="more">
    <a class="static" href="#">ALL</a>
    <a class="static" href="#">Things</a>
    <a class="static" href="#"> More Things</a>
    <a class="static" href="#">Objects</a>
    <a class="static" href="#">Goals</a>
    <a class="static" href="#">Books</a>
    <a class="static" href="#">Drawings</a>
    <a class="static" href="#">Thoughts</a>
</div>

JQuery:

$("div.more a").on("click", function () {
    $("a.static").removeClass("static");
    $(this).addClass("active");
});

I have reviwed the other similar questions here and here, but neither solution is working for me. Can this be done with JQuery or should I put a click event in the html inline anchor?

It looks like it is working just for a second until the page reloads.

I am using Chrome dev tools to view the source. It looks like it is working correctly, but when the page reloads, the "static" class gets removed from all anchor tags in the div. Would there be a reason why the class newly added class name is getting removed after page load?

It is loading a set of projects by passing a variable throught the url. So for instance, when you click on Things it is passing ?type=airports in the url to get the specific relative posts.

UPDATE:

Perhaps there is a better way to acplish this. The overall goal is to show the user which link they clicked when viewing the result set. So when "THings" is clicked, the link has a green background and white type, etc. Since JQuery is removing the added class on the page reload, would php be a better solution?

UPDATE 2

All of the suggested code worked. Since the link is reloading the page and filtering through a url parameter, the issue is not resolved, but the answers were pletely correct.

I am trying to isolate and add a class to a clicked anchor tag. The tags are getting pulled from a Wordpress loop. I can write JQuery to remove the "static" class, but it is removing the class from all tags in the div rather than just the one clicked, adding the active class for a split second, then all classes are removed when the page reloads with the new set of projects.

Here is the WP loop

<div class="more">
    <a class="static" href="<?php bloginfo('template_url'); ?>/work/">ALL</a>           
    <?php
    foreach ($tax_terms as $tax_term) {
    echo '<a class="static" href="' . esc_attr(get_term_link($tax_term, $taxonomy)) . '" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a>';
    } ?>
</div>

Generates this html:

<div class="more">
    <a class="static" href="#">ALL</a>
    <a class="static" href="#">Things</a>
    <a class="static" href="#"> More Things</a>
    <a class="static" href="#">Objects</a>
    <a class="static" href="#">Goals</a>
    <a class="static" href="#">Books</a>
    <a class="static" href="#">Drawings</a>
    <a class="static" href="#">Thoughts</a>
</div>

JQuery:

$("div.more a").on("click", function () {
    $("a.static").removeClass("static");
    $(this).addClass("active");
});

I have reviwed the other similar questions here and here, but neither solution is working for me. Can this be done with JQuery or should I put a click event in the html inline anchor?

It looks like it is working just for a second until the page reloads.

I am using Chrome dev tools to view the source. It looks like it is working correctly, but when the page reloads, the "static" class gets removed from all anchor tags in the div. Would there be a reason why the class newly added class name is getting removed after page load?

It is loading a set of projects by passing a variable throught the url. So for instance, when you click on Things it is passing ?type=airports in the url to get the specific relative posts.

UPDATE:

Perhaps there is a better way to acplish this. The overall goal is to show the user which link they clicked when viewing the result set. So when "THings" is clicked, the link has a green background and white type, etc. Since JQuery is removing the added class on the page reload, would php be a better solution?

UPDATE 2

All of the suggested code worked. Since the link is reloading the page and filtering through a url parameter, the issue is not resolved, but the answers were pletely correct.

• javascript
• jquery
• wordpress
• hyperlink

• 1 don't assume class isn't added just because you don't see visual changes. Your css rule for the class may not be specific enough in reference to other css rules that apply to element – charlietfl Commented Jun 23, 2012 at 21:15

6 Answers 6

$("div.more a").on("click", function () {
    $(this).removeClass("static").addClass("active");
});

$(this) means current clicked object in this case.

I cannot explain that add class not working thing. I just tried it with the latest jquery and it's working. Are you sure it's not adding active?

Edit

$(function(){
    $("div.more a").forEach(function(i){
        var active = window.location.hash;

        if($(this).text() == active){
            $(this).trigger('click');
        }
    });
});

And then shamelessly stealing from the answer below me by Alexander :P:

$("div.more a").on("click", function (event) {
   event.preventDefault();
  // Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");

  window.location.hash = $(this).text();
});

There try something like that. It might have a couple of errors but I'm sure with some reading you could fix them.

Edit again:

Notice the:

   event.preventDefault();

This means do not follow the link and so it will not reload the page when you click this link. I think this actually solves your problem.

Note remember to use:

$("div.more a").on("click", function (event) {

Else it won't work.

I'd go with this:

$("div.more a").on("click", function () {
  // Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");
});

• Remove class active from all anchors.
• Add class static to all anchors.
• Remove class static from clicked anchor.
• Add class active to clicked anchor.

If you're talking about dynamically generated elements, you need to use the .on() method (ok), but bind a click listener to a elements like:

$("div.more").on('click', 'a:not(.active)', function () {
    $(this).addClass('active').siblings('.active').removeClass('active').addClass('static');
});

Using a:not(.active) you attach the click ev. to future elements and you make sure the clicked one does not have already the class active.

try:

$("div.more a").on("click", function () {
    $("a.active").removeClass("active").addClass("static");
    $(this).removeClass("static").addClass("active");
});

You simply need to wrap your onclick function in

$(document).ready(function() {});

So that it listens once the document is ready. Whichever of the answers or formats you choose:

$(document).ready(function() {
    $("div.more a").click(function () {
        $("a.static").removeClass("static");
        $(this).addClass("active");
    });
});

So simple really

I tried all the above but none of the above solved my problem. Not because they are not good example but because I did not understand those. However I edited @Duncanmoo solution and it worked for me. This might work for you as well.

$(document).ready(function() {
$("ul.arbetstagare a").click(function () {
    $("a").removeClass("active");
    $("a.active").removeClass("static");
    $(this).addClass("active");
});});