1

リスト項目クラスを「アクティブ」から「非アクティブ」に切り替える簡単な機能があります。他のすべてのリスト項目を「非アクティブ」に設定して、「アクティブな」リスト項目を 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');
});

2 番目の方法は短くなりますが、処理が遅くなります。

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

すでに jQuery UI を使用している場合は、selectable 関数を利用できます。これにより、最小限のコードで必要なものが得られます。 http://jqueryui.com/selectable/

于 2013-12-27T19:17:25.803 に答える
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 に答える