remove/add class 到父级 div 当子 li 被点击时

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

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

我刚刚将 id 添加到 div 元素菜单容器并修改了您的 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 函数采用 classes 的名称，但你 not 应该加上点。实际上，您的 removeClass 没有工作，然后您在每次点击后将另一个选项卡 class 添加到 div 容器。

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

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

现在它将删除所有 classes 并且只添加您单击的选项卡的 class。

https://jsfiddle.net/tqr10b8p/

remove/add class 到父级 div 当子 li 被点击时

remove/add class to parent div when child li is clicked

html

javascript

css

jquery

jquery-ui-tabs