ulリストのアクティブなクラスをjqueryで追加/削除しますか？

Question

クリックするたびにリスト項目のアクティブなクラスを削除して設定しようとしています。現在、選択されているアクティブなクラスは削除されていますが、設定されていません。私が逃しているものは何ですか？

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は、によって選択された<ul>を指します。代わりに委任を使うことができます！

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

Answer 2

はこれを試してみてください、あなたの文脈では

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

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

$(this)はUL要素ではないLiを指します。したがって、あなたは期待された結果を得ていません。

Answer 3

あなたは兄弟とremoveClass方法

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

Answer 4

を使用することができます私はこれを使用：

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

アクティブクラスは<li>要素であり、何があるので、クリック数：最初の行はすべて<li>から.activeを削除し、2番目の行（$(this)はをクリックした要素です）は、.activeを直接親に追加します。<li>です。