Question

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 accomplish 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 completely correct.

Answer 1

$("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.