javascript - Trying to do a:active to stay on untill other link is clicked -

what i'm trying this: have 2 links hot/update. when hot clicked should turn red , update black. when update clicked should turn red , hot black.

this works on fiddle, not on website.

i able find various answers on so, seems common thing ask. implementing 1 one, none of them works. seem work fine in fiddle not on web.

html:

<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 } 

right now, a:active does, won't stay red.

var links = not think does.

you thinking doing this:

var links = $('a.link');

but, since you're assigning actual click event, it's not resulting in selector.

you need revise code follows:

// "safer" document ready, prevent conflicts other $ libraries jquery(function($) {   $('a.link').click(function() {     // remove class other links     $('a.link').removeclass('active');     // add class _just link_     $(this).addclass('active');   }); }); 

or, version preserves var links:

// "safer" document ready, prevent conflicts other $ libraries jquery(function($) {   // assign links "links" variable   var links = $('a.link');   links.click(function() {     // remove class other links     links.removeclass('active');     // add class _just link_     $(this).addclass('active');   }); }); 

here's working fiddle: https://jsfiddle.net/cale_b/tqzt8f7s/1/