5

私は1つの問題に遭遇しました。デモで見ることができるように、私はいくつかの「タブ」機能を作成しました：http: //jsfiddle.net/4FLCe/

計画は、タブにカーソルを合わせると色がAに変わり、タブをクリックすると色がBに変わるというものでした。

デモからわかるように、クリックした後、ホバーすると背景色の変化が止まりました。!importantホバーの背景色に追加しようと思ったのですが、結果を見ることができます：http: //jsfiddle.net/4FLCe/1/

しかし、それは私が望んでいたようには機能しませんでした。ホバーは、javascriptから設定された背景色の上で機能するようになりました。!important次に、javascriptのカラーセットに追加しました。その結果、何かひどいことが起こりました。私が達成したいことを理解した唯一のブラウザはOperaでした。

他のブラウザは、jsからの適用を停止しました。デモ： http： //jsfiddle.net/4FLCe/2/

したがって、問題は次のとおりです-作業中のホバー、選択したタブの背景はホバーよりも「優先度」が高いため、ホバー時にホバーの背景に変更されず、同じ結果になります。つまり、サファリ、オペラ、クローム、ff ？

4

1 に答える 1

6

メソッド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/でのデモ

于 2012-12-19T00:28:59.670 に答える