change color of selected menu tab

Question

I grabbed this 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 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;}

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

Solution 2

@wsanville

What about the problem of double-clicking the same tab?

If i remove a bottom-border from a tab (indicating the selected one) when clicked on a tab, that's fine. But when i click it again, it should just stay like that (no bottom border), but because of the toggle now it looks like you haven't selected the tab but you are still there.

Comments

[Sajjad]

I know I am late to the party, but just to help someone with this problem, you can just $(this).addClass("clicked"); instead of toggleClass.