3

.1-is-on、.2-is-off、.3-is-offの3つのliクラスを持つulメニューがあります。

クラス.activeのどのliでも、クラス名の「on」の部分を表示する必要があります。デフォルトでは、ページの読み込み時に、1-is-onに.activeが割り当てられています。2-is-offをクリックすると、activeは2-is-offに移動し、1-is-onのままになります。これはすばらしいことです。

.activeが移動したばかりなので、.activeがオンになっているliに2つのことを実行させます。1。「off」の部分を「on」に置き換えます。2。兄弟のliの他の「on」を「off」に置き換えます。

jQuery：

$(function() {    
$("ul.menu li").bind('click',function() {
   var xxx = $(this).siblings('li:not(.active)')
       if($(this).hasClass('active')) {
        $(this).attr("class",this.className.replace('off','on'));
        $(xxx).attr("class",xxx.className.replace('on','off'));
        }
});
});

HTML：

<ul class="menu">
    <li class="1-is-on active">1</li>
    <li class="2-is-off">2</li>
    <li class="3-is-off">3</li>
</ul>

私が見逃した小さなものだといいのですが、それは私を夢中にさせています！

4

2 に答える 2

4 
$("ul.menu li").click(function() {
    $(this).siblings().each(function() {
       this.className = this.className.replace("on", "off"); 
    });
    this.className = this.className.replace("off", "on");
    $(this).addClass("active").siblings().removeClass("active");
});

これは、クリックされた要素のすべての兄弟をに置き換えonてから、クリックされた要素をに置き換えます。次に、クリックされた要素にクラスを追加し、他のすべての要素からクラスを削除します。offoffonactive

ここでこの例を見ることができます。

于 2011-07-07T20:05:34.413 に答える
1 
$(function() {    
    $("ul.menu li").bind('click',function() {
        // Do nothing if we're already active...
        if ($(this).hasClass('active')) return;

        // find the previously active element, remove active and remove "on"
        var previousOn = $(this).siblings('.active');
        previousOn.removeClass('active');
        previousOn.attr("class", previousOn.attr("class").replace("on", "off"));

        // Make the current element active
        $(this).addClass('active');
        // Replace "off" with "on" for this element
        this.className = this.className.replace('off','on');
    });
});
于 2011-07-07T20:01:27.693 に答える