Question

我想在不同的标签选择中使用background-color的不同颜色组合。

例如：

about：red .nav-tabs，暗红色为.active，
服务：黄色.nav-tabs，深黄色为.active，
....
....

等等。

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

预定义背景颜色样式
获取'shown.bs.tab'事件
将其传递给switch声明，
设置.nav-tabs和.active css。

还有更好的，更实际的想法吗？

修改

更清楚的是，我期待的是，如果我选择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");

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

2 个答案: