جيسي "نشط" مهمة مهمة

Question

كل ما أحاول إنجازه هو أن أتمكن من الحصول على قائمة غير مرتبة من الروابط التي يتم فيها النقر فوق المرء، يتم تعيين عنصر قائمة الأصل الفئة "نشطة". بمجرد النقر فوق ارتباط آخر في تلك القائمة، تم التحقق منه لمعرفة ما إذا تم تعيين "نشط"، وإزالته من عنصر القائمة هذه، وإضافته إلى أحدث عنصر قائمة الوالدين النقر فوق أحدث عنصر.

مثال:

الخطوة الأولى - النقر فوق المستخدم الرابط "أنا رابط اثنين"

<ul>
<li><a href="#">I am link one</a></li>
<li class="active"><a href="#">I am link two</a></li>
</ul>

الخطوة الثانية - أدخل المستخدم الآن الرابط "أنا رابط واحد"

<ul>
<li class="active"><a href="#">I am link one</a></li>
<li><a href="#">I am link two</a></li>
</ul>

بسيطة جدا، ولكن الرجل أنا ضربني.

Answer 1

الافتراض: يحتوي عنصر UL على قائمة "Links".

$('.linksList li a').click(function()
{
  $('.linksList li').removeClass('active');
  $(this).parent().addClass('active');
});

Answer 2

شيء مثل ما يلي يجب أن تفعل ذلك

$(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');
    });
});

عرض العمل

Answer 3

هذا السؤال قديم قليلا الآن، لكنني أعتقد أنه لا يزال هناك مساحة للتحسين.

"الحدث المحلي" التقليدي

$("ul a").click(function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action (e.g. follow the link):
    return false;
});

الآن، نفس الشيء باستخدام وفد الأحداث عبر المندوب () (JQUERY +1.4.2). يتيح لك إضافيا بشكل حيوي إضافي> LI> A دون الحاجة إلى إعادة ربط الحدث:

$("ul").delegate("a", "click", function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action
    # and prevent it from bubbling (further) up:
    return false;
});

تغيير "UL" إلى أي شيء يطابق حصريا القائمة (القائمين) المرغوب فيه حصريا، على سبيل المثال ".linkslist"، "#NAV"، إلخ.