Hey all, i am trying my best to figure out how to go about doing this:

I have 2 tabs. When the page loads tab1 is selected automatically. This shows the tab as 1.0 transparency while tab2 stays at 0.7.

Once the user clicks on tab2, tab1 goes to 0.7 transparency and tab2 goes to 1.0. However, i can not seem to get it to do that!

Here is my code:

 <script type="text/javascript">
 function checkTab(theTab)
 {
     $('#tab1').fadeTo(250, 0.70);
     $('#tab2').fadeTo(250, 0.70);

     if ($("#tabActive").val() == theTab)
     {
         $(theTab).fadeTo(250, 1);
     }
 }

 $(document).ready(function() {
     $('#tab1').hover(function() {$(this).fadeTo(250, 1)}, function() {checkTab('#tab1')});
     $('#tab2').hover(function() {$(this).fadeTo(250, 1)}, function() {checkTab('#tab2')});

     $('#tab2').fadeTo(250, 0.70);  
     $('#tabActive').val('tab1');
 });
 </script>

 <li class="stats"><img src="images/Stats.png" name="nav1" width="70" height="52" id="tab1" onclick="$('#tabActive').val('tab1');" /></li>
 <li class="cal"><img src="images/cal.png" name="nav1" width="70" height="52" id="tab2" onclick="$('#tabActive').val('tab2');" /></li>

 <input name="tabActive" id="tabActive" type="text" />

Any help would be great! :)

David