Question

我有一个div容器，里面有一个无序的列表标签菜单。单击每个选项卡时，菜单内容会相应更改。它目前运行良好，但我想更改容纳div的容器div的背景图像，具体取决于点击的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>

我有以下分配了背景图像的课程： .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元素菜单容器中并修改了你的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/

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

2 个答案: