不同標籤的各種背景顏色組合

我想在不同的標籤選擇上使用background-color的不同顏色組合。不同標籤的各種背景顏色組合

例如：

約：紅.nav-tabs，暗紅色爲.active，
服務：黃.nav-tabs，暗黃色的.active，
....
....

等等。

那麼實現這一目標的最佳實踐是什麼？我有一個計劃：

預定義樣式的背景顏色，
獲取有關'shown.bs.tab'事件哈希，
將它傳遞到一個switch聲明，
設置.nav-tabs和.active CSS。

更好，更實際的想法？

編輯：

更清楚，我所預料到的是，如果我選擇about選項卡中，整個標籤面板和其它藥片將是紅色的和積極的about丸將是暗紅色。如果我選擇services，則選項卡面板和所有藥丸將變爲黃色且處於活動狀態services藥丸將呈深黃色。

來源

2017-04-22 Litestone

它不清楚你想要達到什麼目的。請你填寫相關代碼。 –

@Hemant好的，我正在編輯我的問題。 – Litestone

希望這可以幫助你。你可以根據你想要的顏色添加更多的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>

來源

2017-04-22 15:31:07

感謝您的努力！對不起，但不知何故，點擊事件[小提琴]（https://jsfiddle.net/me2r17qw/1/） – Litestone

有點不好意思。如果你的目標是正確的元素，這可以改善:) –

您正在尋找

兄弟姐妹（）jQuery中https://api.jquery.com/siblings/

給你的標籤類，代表

功能憎恨顏色。作爲一個例子，你可以拿下一行。

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

來源

2017-04-22 15:45:19 beorn

對不起，我需要一個更實用的程序多於方法。 – Litestone

不同標籤的各種背景顏色組合

回答

相關問題