2013-03-09 97 views
6

タブの背景を変更しようとしています。タブのリストがありますが、個々のタブの色を変更する方法はわかっていますが、そのすべての背景の色を変えることができます。通常は濃い灰色の色で、タブは薄い灰色です。私はこれらの色を明るい青色または薄い緑色に変更したいと思っていましたが、私はUIタブに関するすべてのCSSを変更しようとしましたが、いずれも機能しませんでした。JQuery UIのタブの背景色

+0

テーマローラーを試しましたか? http://jqueryui.com/themeroller/正確にあなたが変更しようとしている部分のスクリーンショットも役に立ちます。 –

答えて

17

.ui-tabs .ui-tabs-navを変更します。

CSS:

.ui-tabs .ui-tabs-nav 
{ 
background: lightblue; 
} 

.ui-tabs .ui-tabs-panel /* just in case you want to change the panel */ 
{ 
background: blue; 
} 
-1

また、DIVの背景を設定することにより、これを行うことができます。以下は例です - >

<div id="tabs" style="background: none repeat scroll 0% 0% rgb(204, 204, 204);"> 
<ul> 
     <li><a href="#tabs-1">Product-Tweets</a></li> 
     <li><a href="#tabs-2">Popular Product</a></li> 
</ul> 
<div id="tabs-1"> tab 1 content </div> 
<div id="tab-2"> tab 2 content </div> 
</div> 
+0

システムを維持しようとするとハードコーディングスタイルがうまく拡張されないので、cssクラスを使用する方が良いです。デモは大丈夫です。 –