jquery ile ul listesi için aktif sınıf ekle/kaldır?

Question

Tıklatıldığında her zaman bir liste öğesi için aktif bir sınıfı kaldırmaya ve ayarlamaya çalışıyorum. Şu anda seçilen aktif sınıfı kaldırıyor ancak ayarlamıyor. Ne eksik olduğum hakkında bir fikrin var mı?

HTML

<ul class="nav nav-list"> 
    <li class='nav-header'>Test</li> 
    <li class="active"><a href="page1.php">Page 1</a></li> 
    <li><a href="page2.php">Page 2</a></li> 
    <li><a href="page3.php">Page 3</li> 
</ul> 

jQuery:

$('.nav-list').click(function() { 

    //console.log("Clicked"); 
    $('.nav-list li.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 1

this.nav-list tarafından seçilen <ul> işaret eder. Bunun yerine temsilci kullanabilirsiniz!

$('.nav-list').on('click', 'li', function() { 
    $('.nav-list li.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 2

UL elemanı değil Li için bağlamda, $(this) olacak noktaları

$('.nav-list li').click(function() { 

    $('.nav-list li.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

bu deneyin. Bu nedenle beklenen sonuçları almıyorsunuz.

Answer 3

Eğer kardeşin ve removeClass yöntemi

$('.nav-link li').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

Answer 4

kullanabilirsiniz bunu kullandım:

$('.nav-list li.active').removeClass('active'); 
$(this).parent().addClass('active'); 

aktif sınıf <li> eleman ve ne olduğundan tıklandığında <a> öğesinde, ilk satır .active tüm <li>'dan kaldırır ve ikincisi (yine, $(this), tıklanan öğe olan <a>'u temsil eder) .active, <li> olan doğrudan ana öğeye ekler.