单击时更改父 div 类名称的更好方法答案

【问题标题】：Better way to change parent div class name when click单击时更改父 div 类名称的更好方法
【发布时间】：2017-08-23 04:45:17
【问题描述】：

如何在点击每个 LI 时更改 UL 类名（menu1）？

例如，

点击“tab1”时，将UL的类名改为“menu1”。

点击“tab2”时，将UL的类名改为“menu2”。

点击“tab3”时，将UL的类名改为“menu3”。

这个代码是我试过的。

<ul class="tab menu1">
   <li class="tab1">t1</li>
   <li class="tab2">t1</li>
   <li class="tab3">t1</li>
</ul>

<script>
$('.tab1').click(function(){
   $('.tab').addClass('menu1');
   $('.tab').removeClass('menu2');
   $('.tab').removeClass('menu3');
});

$('.tab2').click(function(){
   $('.tab').removeClass('menu1');
   $('.tab').addClass('menu2');
   $('.tab').removeClass('menu3');
});

$('.tab3').click(function(){
   $('.tab').removeClass('menu1');
   $('.tab').removeClass('menu2');
   $('.tab').addClass('menu3');
});
</script>

有什么更好的方法让我的代码更简单？

【问题讨论】：

您的代码看起来不错。有什么问题？
@AmmarCSE 是的，它工作正常，但我的代码看起来很愚蠢:(

标签： jquery

【解决方案1】：

首先，将data-* 属性添加到您的HTML

<ul class="tab menu1">
   <li class="tab1" data-trigger-class="menu1">t1</li>
   <li class="tab2" data-trigger-class="menu2">t1</li>
   <li class="tab3" data-trigger-class="menu3">t1</li>
</ul>

然后，让您的点击处理程序（您只需要一个）使用它们

$('.tab li').click(function(){
   $('.tab').removeClass('menu1 menu2 menu3');
   $('.tab').addClass($(this).attr('data-trigger-class'));
});

【讨论】：

【解决方案2】：

一种有效的方法是使用 li 元素的索引来分配菜单类。

HTML：

<ul class="tab">
   <li class="tabListItem">t1</li>
   <li class="tabListItem">t1</li>
   <li class="tabListItem">t1</li>
</ul>

JS：

$('.tabListItem').click(function(){
    $('.tab').removeClass().addClass('tab').addClass('menu'+($(this).index()+1));
});

【讨论】：