更改活动选项卡上的父 Div 背景颜色答案

【问题标题】：Changing parent Div background color on active tab更改活动选项卡上的父 Div 背景颜色
【发布时间】：2018-06-27 03:44:00
【问题描述】：

我试图弄清楚如何在单击选项卡时更改父 div 容器的背景颜色。我想要它，这样当一个选项卡处于活动状态时，它会向父 div 添加一个类。每个活动选项卡都会为父级添加不同的背景颜色。

Link to the example

这就是我想做的。

【问题讨论】：

请创建一个例子的小提琴

标签： jquery css class click

【解决方案1】：

我在你的控制台上试过了，检查一下

var colors = ["red", "black", "yellow"];
jQuery(document).ready(function() {
  jQuery(".vc_tta-tabs-list > li").on("click", function() { 
    jQuery(".grve-section").css("background", colors[jQuery(this).index()])
  })
})

$ 没有在你的代码中分配，这就是为什么我在这里改为jQuery

【讨论】：

谢谢。如果我想添加背景图片而不是颜色呢？
你可以使用.css('background-image', 'url(' + colors[jQuery(this).index()] + ')');
谢谢！它可以工作，但我想为每个选项卡添加不同的背景图像，所以总共会有 4 个背景图像。实际上，如果可能的话，向“.grve-section”容器添加一个类可以解决这个问题吗？然后我可以通过 css 添加背景颜色和图像。因此，单击选项卡 1 会将类“tab1”添加到 .grve 部分。单击选项卡 2 将类“tab2”添加到 .grve 部分。这可能吗？
是的，但是每次您需要清除最后添加的类时，在单击新选项卡时会很棘手，bcoz。就像您单击选项卡 2 并添加了选项卡 2 类一样，如果您随后单击选项卡 3，则需要删除选项卡 2 类然后添加选项卡
啊好吧。我想知道这样的事情是否可行：link

【解决方案2】：

您可以对每个选项卡使用属性data-color，然后单击即可切换它们

$(document).on('click', 'ul>li', function() {
  $(".main").css("background", $(this).data("color"));
})

body {
  font: 13px Verdana;
}

.main {
  padding: 100px 0;
}

ul {
  display: flex;
  padding: 0;
  list-style: none;
  justify-content: center;
}

ul li {
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <ul>
    <li data-color="red">red</li>
    <li data-color="blue">blue</li>
    <li data-color="cyan">cyan</li>
    <li data-color="yellow">yellow</li>
  </ul>
</div>

【讨论】：

【解决方案3】：

为每个选项卡添加点击事件。

$(selector).click(function(){
 $(this).css("background", "red");
});

【讨论】：