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 and not adding the "active" class.
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.
