如何在click事件上更改类名

时间:2014-03-21 08:06:35

标签: jquery

我想在点击事件中将类名更改为活动...我想从第一个li标签中删除活动的类名,并在两个li标签的“Menu1”中附加活动的类名,反之亦然...如何用JQuery做这个东西

<ul>
<li class="active">menu</li>
<li class="">
    <ul class="submenu">
        <li class="">menu1</li>
    </ul>
</li>
<li class="">menu2</li>

这样的事情

<ul>
<li class="">menu</li>
<li class="active">
    <ul class="submenu">
        <li class="active">menu1</li>
    </ul>
</li>
<li class="">menu2</li>

4 个答案:

答案 0 :(得分:0)

$('li').click(function()
{
$(this).toggleClass('active');
return false;

});

请参阅此链接以获取更多信息

Toggle classaddclass

答案 1 :(得分:0)

单击任何<li>元素,您可以从所有列表项中删除类active,然后将active类仅添加到当前单击的列表项以及最接近的{{} 1}}使用li

的父级
.closest()

<强> Fiddle Demo

<小时/> 修改:忽略上述答案,您可以使用$('ul li').click(function() { $('ul li').removeClass('active') $(this).addClass('active').closest('li').addClass('active') }); 将活动类添加到子菜单中的子.find()

li

<强> Updated Fiddle

答案 2 :(得分:0)

您可以这样使用:

$('li.active').toggleClass('active').next('li').toggleClass('active').find('li').toggleClass('active');

demo

答案 3 :(得分:0)

所以首先要删除dom中的所有活动类,使用$("li").removeClass("active")然后将类激活到所选项,这样就可以了:

$("li").on("click", function(){
   $("li").removeClass("active");
   $(this).addClass("active");
});