jquery列表项类切换
我有一个简单的function来将列表项类从“活动”切换到“非活动”。 什么是最有效的方式（即使用最少量的代码）将所有其他列表项设置为“非活动”，以便只能有一个“活动”列表项？ 请参阅下面的示例。 谢谢
$('#one').click(function () { if ($(this).hasClass("inactive")) { $(this).removeClass("inactive").addClass("active"); } else { $(this).removeClass("active").addClass("inactive"); } }); 这可以工作：
$('.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'); });
为简洁起见：
$('ul.menu li').click(function () { $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active'); });
JS小提琴演示 （127个字符，空格删除字符数：115）。
JS Fiddle的角色计数 ，似乎简洁是意图。
不幸的是，考虑到下面评论中发现的问题，更正的实施比（目前接受的答案）更冗长，替代方案是：
$('ul.menu li').click(function () { var t = this; $(this).siblings().add(t).attr('class', function (){ return t === this ? 'active' : 'inactive'; }); });
JS小提琴演示 （174个字符，空格删除字符数：133）。
要么：
$('ul.menu li').click(function () { var t = this; $(this).parent().children().attr('class', function (){ return t === this ? 'active' : 'inactive'; }); });
JS小提琴演示 （176个字符，空格删除字符数：135）。
当然，白色空间删除的jQuery确实变得有些难以理解 ，但仍然：我声称，呃， 道德胜利……
参考文献：
-
add()。 -
attr()。 -
children()。 -
end()。 -
siblings()。 -
toggleClass()。
$('ul li').click(function() { $('ul li').each(function() { $(this).removeClass('active'); }); $(this).addClass('active'); });
的jsfiddle
如果搜索引擎优化不重要，并使用少量的代码，我会说使用一个单选按钮列表。 然后，您可以使用“：checked”选择器在JavaScript中设置样式并进行交互。
如果您已经在使用jQuery UI，则可以利用可选function。 用最少量的代码可以得到你想要的东西。 http://jqueryui.com/selectable/