在活动标签

Question

我试图找出在单击选项卡时如何更改父div容器背景颜色。我想拥有它，以便当一个标签处于活动状态时，它会向父div添加一个类。每个活动选项卡都会向父级添加不同的bg颜色。

Link to the example

这就是我想做的事。

Answer 1

您可以对每个标签使用属性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>

Answer 2

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

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的原因

Answer 3

为每个标签添加点击事件。

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