不同选项卡的各种背景颜色组合答案

【问题标题】：Various background color combinations for different tabs不同选项卡的各种背景颜色组合
【发布时间】：2017-04-22 14:49:25
【问题描述】：

我想在不同的选项卡选择上使用background-color 的不同颜色组合。

例如：

关于：红色.nav-tabs，深红色为.active，
服务：黄色.nav-tabs，深黄色为.active，
....
....

等等。

那么实现这一目标的最佳做法是什么？我有一个计划：

预定义背景颜色样式，
获取'shown.bs.tab' 事件的哈希，
将其传递到switch 语句中，
设置.nav-tabs和.active css。

还有更好更实用的想法吗？

编辑：

更清楚地说，我期望的是，如果我选择about 选项卡，整个选项卡面板和其他药丸将为红色，而活动的about 药丸将为深红色。如果我选择services，选项卡面板和所有药丸将是黄色，而活动services 药丸将是深黄色。

【问题讨论】：

Its.not clear you want to perform.能否发布相关代码。
@Hemant 好的，我正在编辑我的问题。

标签： jquery css twitter-bootstrap-4

【解决方案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>

【讨论】：

感谢您的努力！抱歉，点击事件fiddle
如果你定位正确的元素，这可以得到改善。:)

【解决方案2】：

你正在寻找

兄弟姐妹（）

jQuery中的函数https://api.jquery.com/siblings/

为您提供代表颜色的选项卡类。可以以下一行为例。

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

【讨论】：

对不起，我需要一个比方法更实用的程序。