jquery list item class toggle

Question

我有一个简单的功能来将列表项类从“active”切换到“inactive”。什么是最有效的方式（即使用最少量的代码）将所有其他列表项目设置为“非活动”，以便只能有一个“活动”列表项目？请看下面的例子。谢谢

<ul class="menu"> 
    <li id="one" class="active">One</li> 
    <li id="two" class="inactive">Two</li> 
    <li id="three" class="inactive">Three</li> 
    <li id="four" class="inactive">Four</li> 
    <li id="five" class="inactive">Five</li> 
</ul> 

<script> 
    $('#one').click(function() { 
     if ($(this).hasClass("inactive")) { 
      $(this).removeClass("inactive").addClass("active"); 
     } else { 
      $(this).removeClass("active").addClass("inactive"); 
     } 
    }); 
</script> 

Answer 1

这可以工作：

$('.menu li').click(function() { 
    $('.menu li').not(this).removeClass('active').addClass('inactive'); 
    $(this).addClass('active').removeClass('inactive'); 
}); 

或

$('.menu li').click(function() { 
    $('.menu li').removeClass('active').addClass('inactive'); 
    $(this).toggleClass('active inactive'); 
}); 

第二种方法是短，但速度较慢。

http://jsperf.com/toggle-vs-add-remove

编辑：这一个是短，速度快：

$('.menu li').click(function() { 
    $('.menu li').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

如果性能是真的，你可以存储你的菜单中的一个变量，这个变量进行操作，比如一个问题：

var $menu = $('.menu li'); 
$menu.click(function() { 
     $menu.not(this).removeClass('active'); 
     $(this).addClass('active'); 
    }); 

Answer 2

$('ul li').click(function() { 
    $('ul li').each(function() { 
     $(this).removeClass('active'); 
    }); 
    $(this).addClass('active'); 
}); 

JSFiddle

Answer 3

如果SEO不重要，并使用少量的代码我会说使用一个单选按钮列表。 然后，您可以使用“：checked”选择器在JavaScript中进行样式和交互。

Answer 4

为了简洁：

$('ul.menu li').click(function() { 
    $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active'); 
}); 

JS Fiddle demo（127个字符，空白移除的字符计数：115）。

Character-counts at JS Fiddle，因为简洁是它的意图。

不幸的是，由于在评论中发现的问题，下面，校正实现一定程度上比（目前公认的答案）更冗长，替代品是：

$('ul.menu li').click(function() { 
    var t = this; 
    $(this).siblings().add(t).attr('class', function(){ 
     return t === this ? 'active' : 'inactive'; 
    }); 
}); 

JS Fiddle demo（174字，空格去掉字符数：133）。

或者：

$('ul.menu li').click(function() { 
    var t = this; 
    $(this).parent().children().attr('class', function(){ 
     return t === this ? 'active' : 'inactive'; 
    }); 
}); 

JS Fiddle demo（176个字符，空白移除的字符计数：135）。

当然，白空间除去jQuery也变得有些不可读，但还是：我要求的，呃，道德胜利......

参考文献：

• add()。
• attr()。
• children()。
• end()。
• siblings()。
• toggleClass()。

Answer 5

如果您已经在使用jQuery UI，您可以利用可选功能。这会以最少的代码得到你想要的。 http://jqueryui.com/selectable/