JQuery изображение выцветания с закладками

Question

Привет всем, я стараюсь изо всех сил, чтобы выяснить, как идти об этом:

У меня есть 2 вкладки. При загрузке страницы tab1 выбирается автоматически. Это показывает вкладку как 1,0 прозрачность, в то время как tab2 остается равным 0,7.

Как только пользователь нажимает на tab2, tab1 переходит в 0.7 прозрачности, а tab2 переходит в 1.0. Тем не менее, я не могу заставить его это сделать!

Вот мой код:

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

Любая помощь будет здорово! :)

David

Answer 1

Вы вводите значение tab1 в tabActive.val(), но проверить #tab1. Решите, хотите ли вы или не хотите, # в селекторе =)

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

(И на самом деле, более чистый способ сделать это может быть просто ввести номер (1 или 2), а затем построить строку в функции проверки. Но это только я думаю, что строки выглядят уродливыми в javascript и пытаются их избежать ...)