Maintain link color on click until click on another link

Question

Below each of my posts on my webpage, I have 3 buttons: “Written,” “Linked Mail,” and “In This Category”: SoCatchy!

I want to add color when I click on each button and save it until I click on another link.

Here is my following code:

HTML:

<ul class="tabnav-widget ui-tabs-nav">
   <li class="ui-tabs-selected">
      <a class="" href="#tab1-widget">written by</a>
   </li>
   <li>
      <a class="" href="#tab3-widget">Related Posts</a>
   </li>
   <li class="">
      <a class="" href="#tab4-widget">In this Category</a>
   </li>
</ul>

CSS

.tabnav li a, .tabnav-widget li a{color:@white;}
.tabnav li:active, .tabnav-widget li:active{background:@white;}

In jQuery, I really don't know what function I need to build in order to use what I want. I need help creating it.

I thank you in advance, any help is appreciated.

Answer 1

This is possible with javascript.

$(".tabnav-widget li a").click(function(){        
   if(!($(this).hasClass("active"))){
       $(".tabnav-widget li a.active").removeClass("active");
       $(this).addClass("active");
   }       
});