jQuery列表項類切換

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演示 （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確實變得有些難以理解 ，但仍然：我聲稱，這是道德上的勝利...

參考文獻：

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

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，則可以利用selectable函數。 這將使您以最少的代碼獲得所需的東西。 http://jqueryui.com/selectable/