1

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

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

5 回答 5

11

这可以工作：

$('.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');
    });
于 2013-07-24T21:41:50.700 回答
1

为简洁起见：

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

JS Fiddle 演示（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 Fiddle 演示（174 个字符，去除空格的字符数：133）。

或者：

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

JS Fiddle 演示（176 个字符，去除空格的字符数：135）。

当然，删除空格的 jQuery 确实变得有些难以理解，但仍然：我声称，呃，道德上的胜利......

参考：

于 2013-07-24T21:59:11.103 回答
0 
$('ul li').click(function() {
    $('ul li').each(function() {
       $(this).removeClass('active'); 
    });
    $(this).addClass('active');  
});

JSFiddle

于 2013-07-24T21:46:05.497 回答
0

如果 SEO 不重要并且使用更少的代码，我会说使用单选按钮列表。然后，您可以使用 ":checked" 选择器在 JavaScript 中设置样式和交互。

于 2013-07-24T21:46:18.227 回答
0

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

于 2013-12-27T19:17:25.803 回答