さまざまなタブのさまざまな背景色の組み合わせ

Question

background-colorの異なる色の組み合わせを、異なるタブの選択に使いたいとします。例えば

：

• 約：.nav-tabs赤、.active用暗赤色、
• サービス：黄色.nav-tabs、.active用ダークイエロー、
• ....
• ....

など。

これを達成するにはどうすればよいでしょうか？

、

1. 背景色の事前定義されたスタイル'shown.bs.tab'イベントのハッシュを取得し、
2. switch声明、
3. 設定.nav-tabsと.active CSSにそれを渡します。私は計画を持っています。

これ以上の実用的なアイデアはありますか？

EDIT：

より明確にするために、私は何を期待していことは、私はaboutタブを選択した場合、全体のタブパネルと他のピルはabout錠剤は暗赤色になり、赤とアクティブになりますです。 servicesを選択すると、タブパネルとすべての丸薬は黄色になり、アクティブなservices丸薬は暗黄色になります。

Answer 1

これはあなたに役立ちます。li要素を追加し、希望の色に応じてclassesを追加します。

$(function() { 
 
    $('li:first').hover(function() { 
 
    $(this).toggleClass('darkgreen'); 
 
    $('ul').find('li').not(this).toggleClass('green'); 
 
    }) 
 
    $('li:nth-of-type(2)').hover(function() { 
 
    $(this).toggleClass('darkred'); 
 
    $('ul').find('li').not(this).toggleClass('red'); 
 
    }) 
 
})

ul li { 
 
    list-style-type: none; 
 
    width: 100px; 
 
    padding: 20px; 
 
    background-color: #444; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    transition:0.3s; 
 
    cursor:pointer; 
 
} 
 

 
.green { 
 
    background: lightgreen; 
 
} 
 

 
.darkgreen { 
 
    background: darkgreen; 
 
} 
 

 
.darkred { 
 
    background: darkred; 
 
} 
 

 
.red { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>about</li> 
 
    <li>services</li> 
 

 

 
</ul>

Answer 2

あなたは

兄弟（）あなたはその担当者タブクラスを与える

jQueryのhttps://api.jquery.com/siblings/で

機能を探しています色を再送する。次の行を例として取り上げることができます。

$(".active").css("color", "blue").siblings().css("color", "darkerblue");