jquery image fading with tabs

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'开发者_Python百科).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

You're entering the value tab1 into tabActive.val(), but you check for #tab1. Decide whether you want or do not want the # in the selector =)

$(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');
});

(And actually, a cleaner way to do it could be to just enter a number (1 or 2) and then build the string in the check function. But that's just me thinking strings look ugly in javascript and trying to avoid them...)