2

jQuery UIタブを垂直タブとしてスタイル設定しようとしていますが、提供されている垂直タブデモとは少し異なるスタイルになっています。

私はこれを達成しようとしています：

欲しいもの

しかし、私が得ることができる最高のものはこれです：

私の最善の試み

タブの下の境界線の色がテキストの色と一致していることに気付くでしょうが、私は本当に境界線がタブ全体で一貫していることを望んでいます。

私はこのようにcss行を追加することができます：

.ui-tabs-vertical > .ui-tabs-nav li {
    border-bottom-color: #C5DBEC !important;
}

ただし、jQuery UIテーマローラーによって提供される色をハードコーディングしたくないので、テーマを変更したり、Webサイトのブランドごとに異なるテーマを使用したりすると、これは悪夢になります。維持。

問題をもう少し深く見てみると、標準のjQueryUIテーマcssがこれを行っているようです。

.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }

これは、すべてが通常、下の境界線を削除する必要がある水平タブ用に設定されているためです。生成されたテーマローラーcssの一部であるため、これを削除できません。省略形の境界線の最初の2つ（つまり、幅とスタイル）のみが指定されているため、これによってborder-colorプロパティが変更されることはないと思います。したがって、ここでは境界線の色が上書きされないことを期待しますが、実際には上書きされ、フォントの色に設定されています。

このcss行を元に戻すために私が行ったことは次のとおりです。

.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }

ここでも、border-bottom-colorには触れていないことに注意してください。

この結果、少なくともFirefoxでは、これはfirebugから取得されたものです。

ファイアバグキャプチャ

何らかの理由で、border-bottom-colorに何も触れていないのに、色がデフォルトのブラウザの色に戻されているように見えます。.ui-widget-content .ui-state-defaultの色を通過させたいだけですが、その方法がわかりません。

DOMの親要素から色を取得したくないため、inheritを使用しても機能しません。

これが私の問題を示すjsFiddleです。誰かが私が保守可能な解決策を得るのを手伝ってもらえますか？

4

2 に答える 2

1

@hexblotの答えを使用して、色を動的に取得します。

これを行うには、偽のアイテムを作成し、必要なjQueryクラスを適用し、その後.css()、色を取得するために使用します。そのような単純な。

ハードコードされたものなしで、クリーンな解決策を見つけようとするための+1。

于 2014-03-07T18:20:05.613 に答える
0

追加するだけ

.ui-state-active { color: #2E6E9E !important; }

そして、あなたは大丈夫なはずです。CSSのこの行（最後の行）でフィドルを更新しました。

于 2013-02-20T11:51:02.353 に答える