Javascript 单击子li时将类删除/添加到父div

我有一个div容器，其中包含无序列表选项卡菜单。单击每个选项卡时，菜单内容会相应地更改。它目前工作得很好，但是我想改变容器div的背景图像，该容器div包含ul内容，具体取决于单击哪个li

这是我的标记：

<div class="menu-container menu-container-starters">
 <ul class="tabs">
  <li class="active" data-trigger-class="menu-container-starters">Starters Content</li>
  <li data-trigger-class="menu-container-mains">Mains Content</li>
  <li data-trigger-class="menu-container-drinks">Drinks Content</li>
  <li data-trigger-class="menu-container-desserts">Desserts Content</li>
 </ul>
</div>

---

这是我为您创建的实际代码的链接

我刚刚向div元素菜单容器添加了

id

，并修改了jquery代码

希望这对您有所帮助：）

$（'.tabs li'）。单击（函数（）{
$（“#菜单容器”）.removeAttr（'class'）；
$（this）.closest（'#menu container'）.addClass（$（this）.attr（'data-trigger-class'））；
});
.menu容器启动器{背景：蓝色；}
.menu容器甜点{背景：红色；}
.menu容器饮料{背景：黄色；}
.menu容器主电源{背景：橙色；}


启动器内容
电源内容
饮料内容
甜点内容

公认的答案确实有效，但我认为主要的一点是removeClass函数采用了类的名称，但是您不应该添加点。实际上，您的removeClass不起作用，然后在每次单击之后向div容器添加另一个选项卡类

基本上，可以使用原始方法解决此问题，但请正确提供removeClass中的类列表：

$('.menu-container').removeClass('menu-container-starters menu-container-mains menu-container-drinks menu-container-desserts');    

现在，它将删除所有类，只添加您单击的选项卡的类

它在大多数情况下都有效，但当我单击每个选项卡时，我单击的每个选项卡的背景都会发生变化，如果我返回到原始选项卡，背景图像将保留为ul中的最后一个选项卡…为什么要添加ID而不是
。最近（'.menu container'）
？
$('.menu-container').removeClass('menu-container-starters menu-container-mains menu-container-drinks menu-container-desserts');