Question

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

例如，

点击＆＃34; tab1＆＃34;，将UL的班级名称更改为＆＃34; menu1＆＃34;。

点击＆＃34; tab2＆＃34;，将UL的班级名称更改为＆＃34; menu2＆＃34;。

点击＆＃34; tab3＆＃34;，将UL的班级名称更改为＆＃34; menu3＆＃34;。

这个代码是我试过的。

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

更简单的方法是让我的代码更简单吗？

Answer 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'));
});

Answer 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));
});

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

2 个答案: