change color of selected menu tab

Question

so i have grabbed a snippet from another question

<script type='text/javascript' >
$(document).ready(function () {
 $("div.content ul li a")
 .mouseover(function () {
  var t = $(this);
  if (!t.hasClass("clicked")) {  // very easy to check if element has a set of styles
   t.addClass('mouseover');
  }
 })
 .mouseout(function () {  // attach event here instead of inside mouse over
  $(this).removeClass('mouseover');
 });

 $("div.content ul li a").click(function () {
  var t = $(this);
  t.toggleClass("clicked");
  if (t.hasClass("clicked")) {
   t.removeClass('mouseover');
  } else {
   t.addClass('mouseover');
  }
 });
});
</script>

the only last thing i wanted is to restore the tabs normal css when another tab is clicked. for example the tab's bgcolors are white when i click tab1 it becomes black when i go into Tab2..Tab1 goes white and Tab2 goes black

<ul> 
 <li>
  <a href="#Tab1">Tab 1</a>
 </li>
 <li>
  <a href="#Tab2">Tab 2</a>
 </li>
</ul> 

let's say here's the CSS part

ul li a {background-color: white;}
ul li a.mouseover {background-color: black;}
ul li a.mouseout {background-olor: white;}
ul li a.clicked {background-color: black;}

Answer 1

You can actually greatly simplify your Javascript for this. This should achieve your desired effect.

<script type="text/javascript">
    $(document).ready(function() {
        $("div.content ul li a")
         .mouseover(function() {
             $(this).addClass('mouseover');
         })
         .mouseout(function() {
             $(this).removeClass('mouseover');
         });

        $("div.content ul li a").click(function(e) {
            e.preventDefault(); //prevent the link from actually navigating somewhere
            $(this).toggleClass("clicked");
            $("div.content ul li a").not(this).removeClass("clicked"); //remove the clicked class from all other elements
        });
    });
</script>

The Javascript here will do the following:

• Add the "mouseover" class when you hover a link
• Remove the "mouseover" class when you no longer hover a link
• When you click a link, it will toggle the "clicked" class and remove it from any other link that may have had the class - this will restore your other tabs to their "normal" state.

Answer 2

It is possible to achieve what you are looking for using just CSS:

ul li a {background-color: white;}
ul li a:hover {background-color: black;}
ul li a:focus {background-color: black;}

Demo