javascript - javascript 中的 bg 颜色、悬停、!important 和 .css

Question

我遇到了一个问题。 我已经创建了一些“选项卡”功能，如演示中所示:http://jsfiddle.net/4FLCe/

计划是，当您将鼠标悬停在选项卡上时，其颜色变为颜色 A，当您单击选项卡时，其颜色变为颜色 B。

从演示中可以看出，单击后悬停时背景颜色停止变化。我想在悬停的背景颜色中添加 !important ，结果可以看到:http://jsfiddle.net/4FLCe/1/

但是这并不像我想要的那样执行，悬停现在可以在 javascript 设置的背景颜色上工作。然后我将 !important 添加到 javascript 中的颜色集。这导致了一些可怕的事情。唯一理解我想要实现的目标的浏览器是 Opera。

其他浏览器只是停止从js应用一个。演示:http://jsfiddle.net/4FLCe/2/

所以问题是:如何实现下一步 - 工作悬停，所选选项卡的背景比悬停具有更高的“优先级”，因此它不会在悬停时更改为悬停背景，结果相同在 ie、safari、opera、chrome、ff 中？

Answer 1

您应该使用 class 而不是通过 .css() 方法设置它。

所以创造

.selected-tab{
    background-color:#d6d6d6!important;
}

并将您的代码更改为

$(function() {  
    $('.pagecontent').eq(0).show();
    $('.tab').click(function() {  
        $('.pagecontent').hide();
        $('.selected-tab').removeClass('selected-tab');
        $(this).addClass('selected-tab');
        $('.pagecontent').eq($(this).index()).show();
    });  
});

演示在 http://jsfiddle.net/gaby/4FLCe/3/