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

Question

我有一个 div 容器，里面有一个无序列表选项卡菜单。 当我单击每个选项卡时，菜单内容会相应更改。 它目前运行良好，但是我想根据单击的 li 更改包含 ul 内容的容器 div 的背景图像。

这是我的标记：

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

我有以下分配了背景图像的类： .menu-container-starters .menu-container-mains .menu-container-drinks .menu-container-desserts

我的JS是：

$('.tabs li').click(function(){
    $('.menu-container').removeClass('.menu-container-starters .menu-container-mains .menu-container-drinks .menu-container-desserts');
    $('.menu-container').addClass($(this).attr('data-trigger-class'));
});

Answer 1

这是我为您创建的实际代码的链接https://jsfiddle.net/beljems/b3v8g3by/ 。

我刚刚将id添加到 div 元素 menu-container 并修改了您的 jquery 代码。

希望这会帮助你:)

 $('.tabs li').click(function(){ $('#menu-container').removeAttr('class'); $(this).closest('#menu-container').addClass($(this).attr('data-trigger-class')); });

 .menu-container-starters{ background: blue; } .menu-container-desserts{ background: red; } .menu-container-drinks{ background: yellow; } .menu-container-mains{ background: orange; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu-container" class="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>

Answer 2

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

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

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

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

https://jsfiddle.net/tqr10b8p/