Question

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

<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.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确实变得有些不可读，但仍然：我声称，呃，道德胜利......

参考文献：

Answer 3

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

JSFiddle

Answer 4

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

Answer 5

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

jquery列表项类切换

5 个答案: