サービス ページの 1 つに内部タブが必要です。ページで通常の jQuery UI タブを既に使用していますが、内側のタブに別のスタイルを使用したいと考えています。
多くの人気のあるサイトでは、タブのタイトルに単純なテキスト、タイトルの下に長い下線、および選択されたタブを表す下向き矢印を使用することで、メインのタブとは異なる内部タブを使用しています。（画像添付）。
タブが選択されたときに下向き矢印を配置するようにjQuery UIタブをスタイルする方法を知っていますか?
質問する
3354 次
3 に答える
4
css3で三角形を作る方法を教えてください。css を使用してこれを行うことができますが、上記の例は css のみを使用して完全に可能というわけではありません。境界線を使用して作成されるため、三角形に境界線を設定することはできません。
このように下向きの三角形を作成します
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
あなたがフィドルで探しているものを作成しました。
http://jsfiddle.net/jessekinsman/Mn2sx/
ただし、上記のものとまったく同じものを作成したい場合は、三角形にカスタム アイコン フォントを使用し、その上にテキスト シャドウを配置してストロークを付けることができます。
ただし、下位互換性と、三角形に影と境界線を追加する機能が必要な場合は、画像が最も互換性のあるアプローチになります。
于 2013-02-28T23:13:40.300 に答える
0
はい、これは非常に簡単です。li 要素を class="active" でスタイリングするだけです。
このようなもの
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
上記は、アイデアを提供するための単なるサンプルコードです。矢印の画像を適切に並べるためには、画像の値を微調整する必要があります。
しかし、あなたの質問はもっと複雑かもしれないと思います。
同じページに存在する 2 つの個別の jQuery タブを異なるスタイルでスタイルする方法を尋ねていますか?
その場合は、スタイルの 1 つを一意のクラスまたは ID を持つ要素にラップすることをお勧めします。このような：
<div class="new-tabs">
<ul class="tabs">
<li><a href="#">Tab1</a></li>
</ul>
</div>
次に、tabs.css からすべてのスタイルをコピーし (現時点では css ファイルの正確な名前を思い出せません)、これらすべてのルールの前にクラスまたは ID を追加できます。このような
.tab li { something.... }
.new-tabs .tab li {something...}
これで、コンテナー内のタブ用に完全に独立したスタイル セットができました。
コピーしたばかりのスタイルを調べて、不要なものを削除することをお勧めします。
于 2013-02-27T01:32:38.640 に答える
0
この Web サイトに示されているような、クラス ui-tabs-active に css を追加してみることができます: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
于 2013-02-26T21:29:06.070 に答える