Javascript 用于在css中更改颜色的If-else语句

我有两个按钮，一个用于vimeo，一个用于youtube。这些按钮以从右向左的方式切换这两个视频

我想在显示youtube视频时突出显示（更改颜色）youtube按钮（marginLeft:'0'），在显示vimeo视频时突出显示vimeo按钮（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)')
};

});

---

我的建议是在css中添加一个类

active

：

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

您打算使用时使用了，将选择器作为字符串与jQuery对象进行比较没有意义：

if ('#youtube_player' = youtube) {

另外，由于您仅使用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.Wolff在评论中所说的做，在单击按钮时添加一个类。

看看这个JSFIDLE

我在这里所做的是

• 添加了youtube上的活动类按钮
• 在所选按钮上应用活动类
• 移除hove效果（可选）

代码

---

只需单击添加/删除一个类：但您的代码应该重构一点

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

});