如果其他語句在css中改變顏色

Question

http://jsfiddle.net/alexruff/Vrxv9/3/

我有2個按鈕，一個用於vimeo，一個用於youtube。這些按鈕從右向左移動兩個視頻。

我想在顯示YouTube視頻（marginLeft：'0'）時突出顯示（更改顏色）YouTube視頻按鈕，以及顯示視頻視頻時的視頻按鈕（marginLeft：'-1000px'）。

我嘗試使用if else語句，但沒有任何工作了。

感謝您的幫助。

JQuery的：

$(document).ready(function(){ 

$('#vimeo_player_button').click(function(){ 
    $('#youtube_player').animate({ 
     marginLeft: '-1000px' 
    }); 
}); 

$('#youtube_player_button').click(function(){ 
    $('#youtube_player').animate({ 
     marginLeft: '0' 
    }); 
});  

var youtube = $('#youtube_player').animate({marginLeft: '0'}); 

if ('#youtube_player' = youtube) { 
    $('#youtube_player_button').css('background-color': 'rgb(0, 0, 250)') 
} else{ 
    $('#vimeo_player_button').css('background-color': 'rgb(0, 0, 250)') 
}; 

}); 

Answer 1

我的建議是一類active添加到您的CSS：

.active { 
    background-color: rgb(0, 0, 250);   
} 

然後加入active類點擊的按鈕，以及去除其他按鈕這個類：

$('#vimeo_player_button').click(function(){ 
    $('#youtube_player').animate({ 
     marginLeft: '-1000px' 
    }); 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$('#youtube_player_button').click(function(){ 
    $('#youtube_player').animate({ 
     marginLeft: '0' 
    }); 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
});  

Updated Fiddle

Answer 2

您使用的assignment operator，當你想用的comparison operator，並比較選擇作爲一個字符串轉換爲jQuery對象是沒有意義的：

if ('#youtube_player' = youtube) { 

而且，因爲你只改變一個CSS property使用jQuery你,分開它，而不是:

if ('#youtube_player' = youtube) { 
    $('#youtube_player_button').css('background-color', 'rgb(0, 0, 250)') 
} else{ 
    $('#vimeo_player_button').css('background-color', 'rgb(0, 0, 250)') 
}; 

最後，你應該做的事A.沃爾夫在說評論，只需點擊按鈕即可添加一個類。

Answer 3

看這個的jsfiddle http://jsfiddle.net/Vrxv9/10/

我在這裏做的是

• 添加的活性類YouTube上的按鈕
• 應用活動類的選擇按鈕
• 去除霍夫效果（可選）

代碼

$(document).ready(function(){ 

    // intialization 
    $('#youtube_player_button').addClass("active"); 

    $('#vimeo_player_button').click(function(){ 
     $('#youtube_player').animate({ 
      marginLeft: '-1000px' 
     },1000,function(){ 
      $('#youtube_player_button').removeClass("active"); 
      $('#vimeo_player_button').removeClass("active"); 
      $('#vimeo_player_button').addClass("active"); 
     }); 

    }); 

    $('#youtube_player_button').click(function(){ 
     $('#youtube_player').animate({ 
      marginLeft: '0' 
     },1000,function(){ 
      $('#vimeo_player_button').removeClass("active"); 
      $('#vimeo_player_button').removeClass("active"); 
      $('#youtube_player_button').addClass("active"); 
     }); 
    });  

});