0

WordPressテーマサイドバーにあるjQueryタブ付きインターフェースであるWordPressプラグインがあります。サイトの 90% で、プラグインは想定どおりに表示されますが、サイトの 10% で、jQuery タブ ナビゲーション タブ CSS スタイルが台無しになり、別のプラグインまたはテーマ CSS ファイルによって上書きされます。

これは、タブの表示方法の一部です。

<div id="aaw_tabs" style="width:250px !important">

    <ul class="aaw_tabnav">
        <li><a href="#aaw-tabs-popular">Popular</a></li>
        <li><a href="#aaw-tabs-recent">Recent</a></li>
        <li><a href="#aaw-tabs-comments">Comments</a></li>
        <li><a href="#aaw-tabs-tags">Tags</a></li>
    </ul>

    <div class="aaw_tabs_body">

        <div class="inside">

            <div id="aaw-tabs-popular">
                example tab content
                <div class="clear"></div>
            </div>

            <div id="aaw-tabs-recent">
                example tab content
                <div class="clear"></div>
            </div>

            <div id="aaw-tabs-comments">
                example tab content
                <div class="clear"></div>
            </div> 

            <div id="aaw-tabs-tags">
                example tab content
                <div class="clear"></div>
            </div>

        </div>
    </div>
</div>

次の jQuery コードで jQuery タブを初期化します。

(function($) {
    $(document).ready( function() {

        // Advanced Activity Widget Tabs
        $( "#aaw_tabs" ).tabs({ fx: { opacity: 'toggle', duration: 200 } });
    });
})(jQuery);

タブのスタイルを設定する CSS は次のとおりです。

#aaw_tabs { padding:0 !important; margin:0 auto !important; border:none !important; background:none !important}

ul.aaw_tabnav { position:relative; margin:0 !important; padding:0 !important; list-style-type:none !important; width:100%; }
ul.aaw_tabnav li { display:inline; padding:0 !important; margin:0 !important; border:none !important; background:none !important;  }

ul.aaw_tabnav li a { text-decoration:none; text-transform:uppercase; color:#444; padding:5px; outline:none; font-size:0.8em; font-weight:bold; background:#DDD; border-bottom:none; border-top:1px solid #DDD; text-shadow:0 1px 0 #FFF; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; background:-moz-linear-gradient(top, #DDDDDD, #CCCCCC); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #DDDDDD), color-stop(1, #CCCCCC)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#DDDDDD', EndColorStr='#CCCCCC')"; /* IE8 only */ filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#DDDDDD', EndColorStr='#CCCCCC'); /* IE6,IE7 only */}
ul.aaw_tabnav li a:hover { color:#FFF; background:#666; text-decoration:none; text-shadow:0 1px 0 #ccc; }
ul.aaw_tabnav li a:active, ul.aaw_tabnav li.ui-tabs-selected a { text-decoration:none; padding:5px; color:#666; text-shadow:0 1px 0 #FFF; border:1px solid #CCC; border-top-color:#DDD; border-bottom:none; top:1px; background:#EAEAEA; background:-moz-linear-gradient(top, #FFFFFF, #EAEAEA); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EAEAEA)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#EAEAEA')"; /* IE8 only */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#EAEAEA'); /* IE6,IE7 only */}

.aaw_tabs_body { width:98% !important; padding:1%; background:#EAEAEA; border:1px solid #CCC; -moz-border-radius:0 5px 5px 5px; -webkit-border-radius:0 5px 5px 5px; border-radius:0 5px 5px 5px; }
.aaw_tab_single_box { float:left; width:96%; padding:2%; background:#FEFEFE url(../images/bg-box.png) repeat-x; border:1px solid #CCC; display:none; }

.aww_tabs_body .inside { margin:0 !important; padding:0 !important }
.aaw_tabs_body .inside ul { margin:0 !important; padding:0 !important}
.aaw_tabs_body .inside ul li { border-top:1px solid #e5e5e5 !important; float:left; display:inline; font-size:11px !important; color:#595959 !important; margin:0px 1px 0px 0px !important; padding:10px 0px 5px 5px !important; cursor:pointer; border-bottom:none; vertical-align:top !important; width:260px; }
.aaw_tabs_body .inside ul li a { display:block; float:left; padding:0px 7px 10px; color:#595959 !important; font:inherit 11px Arial, Helvetica, sans-serif !important; text-decoration:none !important }
.aaw_tabs_body .inside ul li a:hover { text-decoration:none !important; color:#0088CC !important }

.clear { clear:left;}
.ui-tabs-hide { display:none; }

さて、問題は何ですか。ナビゲーションには 4 つのタブがあります。これは、次のようになります。

作業タブのナビゲーション

ただし、一部のサイトでは、タブ ナビゲーションが台無しになり、タブ ナビゲーションが歪んで次のようになります。

歪んだタブ

このサイトはヨーロッパのサイトなので、テキストは右側に表示されますが、タブ ナビゲーションが全幅に広がっているように見えます。

タブのCSSスタイリングに関係していると確信していますが、解決できません。

ナビゲーションのスタイルを設定するのは CSS クラス .aaw_tabs です。それらは現在、display:inline としてスタイル設定されています。float、display:inline-block を試しました。

この問題を数か月間理解しようとしているので、どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

1

上書きされていると思われる css セレクターを複製して、セレクター名を変更できます。次に、ロードされた css ファイルにセレクターが既に存在するかどうかを確認する js をプラグインに追加します。最初のステップで複製したセカンダリ セレクターは、css 値をプラグインに追加できます。

または、より簡単な解決策として、セレクターの名前を本当に変な名前 (一般的ではない名前だけ) に変更して、重複する可能性がないようにしてから、css ファイルで各セレクターが何をするかをコメントします。

于 2012-09-22T00:08:17.940 に答える