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

Question

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

示例链接

这就是我想做的事。

Answer 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

Answer 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>

Answer 3

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

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

Answer 4

$(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>

金刚