bg颜色,悬停,!重要和.css在javascript中

Question

我遇到了一个问题.我已经创建了一些"标签"功能,可以在演示中看到:http://jsfiddle.net/4FLCe/

计划是,当您将鼠标悬停在标签上时,其颜色会变为颜色A,当您单击标签时,其颜色会变为颜色B.

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

但这不是我想要的,现在悬停将适用于javascript的背景颜色集.然后我添加!important到javascript中的颜色集.这导致了一些可怕的事情.理解我想要实现的目标的唯一浏览器是Opera.

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

所以问题是:如何实现下一步 - 工作悬停,所选标签的背景具有比悬停更高的"优先级",因此它不会改变为悬停时悬停的背景,同样的结果即,safari,opera,chrome,ff ？

Answer 1

您应该使用a 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/