Peguei esse trecho de outra pergunta:

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

A última coisa que eu queria é restaurar as abas css normais quando outra aba é clicada. Por exemplo, as bgcolors da guia são brancas quando clico na guia1, elas ficam pretas quando eu entro na guia2 .. A guia1 fica branca e a guia2 fica preta

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

digamos aqui está a parte CSS

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