不同标签的各种背景颜色组合

我想在不同的标签选择上使用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

不同标签的各种背景颜色组合

回答

相关问题