My goal is to have two links, "hot" and "update." When "hot" is clicked, it should turn red and "update" should turn black. Conversely, when "update" is clicked, it should turn red and "hot" should turn black.
This functionality works perfectly on a Fiddle, but unfortunately not on my website.
I searched for solutions on Stack Overflow, as this seems like a common issue. I tried implementing various solutions one by one, but none of them seem to work. They all function correctly in the Fiddle but not on my actual website.
Here is the HTML code:
<div id="Space" >
<ul>
<li role="presentation" class="sort">
<a class="link" href="/?sort=score&page=1" style="text-decoration:none;">hot</a>
</li>
<li role="presentation" class="date">
<a class="link" href="/?sort=date&page=1" style="text-decoration:none;">update</a>
</li>
</ul>
</div>
JavaScript:
$(function() {
var links = $('a.link').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
CSS:
a.link.active { color: red; }
a, a:visited { color: black }
Currently, the links do behave like a:active, where they briefly turn red when clicked, but then return to black. The desired behavior is for the clicked link to stay red until the other link is clicked.