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

Question

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

例如:

• about:红色.nav-tabs，深红色为.active，
• 服务:黄色.nav-tabs，深黄色为.active，
• ....
• ....

等等。

那么实现这一目标的最佳实践是什么？我有一个计划:

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

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

编辑:

更清楚的是，如果我选择 about 选项卡，整个选项卡面板和其他 pill 将是红色的，而事件的 about pill 将是黑色的红色的。如果我选择 services，选项卡面板和所​​有 pill 都将为黄色，而事件的 services pill 将为深黄色。

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>