kolor bg, hover,! Important i .css w javascript

Question

Natrafiłem na jeden problem. Utworzyłem niektóre funkcje "kart", które można zobaczyć w wersji demonstracyjnej: http://jsfiddle.net/4FLCe/

Plan polegał na tym, że po najechaniu kursorem na zakładkę jego kolor zmienia się na kolor A, po kliknięciu na zakładkę kolor zmienia się na kolor B.

Jak widać z wersji demonstracyjnej, po kliknięciu kolor tła przestał się zmieniać po najechaniu myszą. Pomyślałem o dodaniu !important do koloru tła dymku, wyniki można zobaczyć: http://jsfiddle.net/4FLCe/1/

Ale wykonałem nie tak, jak chciałem, teraz hover będzie działać na zestawie kolorów tła z javascript. Następnie dodałem !important do zestawu kolorów w javascript. To spowodowało coś strasznego. Jedyną przeglądarką, która zrozumiała, co chciałem osiągnąć, była Opera.

Inne przeglądarki właśnie przestały stosować jedną z js. Demo: http://jsfiddle.net/4FLCe/2/

Więc pytanie jest: jak osiągnąć następny - praca wskaźnikiem, tło wybranej zakładki mają wyższy priorytet „” niż aktywowania więc nie zmieni się na tle unoszą się przy aktywowaniu, a sam wynik w tj safari, opera, chrom, ff?

Answer 1

Należy użyć class zamiast ustawiania go za pomocą metody .css() ..

więc tworzyć

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

i zmienić swój kod do

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

Demo na http://jsfiddle.net/gaby/4FLCe/3/