"this"要素にクラスを追加する

Question

navからクリックしたリンクに.focusedクラスを追加しようとしています。

私が書いた短いスクリプトは機能しません。誰でも私になぜ教えてもらえますか？

$("nav").on('click', '*', function() { 
 
    $(this).addClass('focused'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <h1>Menu:</h1> <br> 
 
    <a href="/tests/add-new-test-link">Add link</a> 
 
    <a href="/tests/run-tests">Run tests</a> 
 
    <a href="/tests/reports-history">Test reports history</a> 
 
    <a href="/tests/links-list">Links list</a> 
 
</nav>

私はconsole.log(this)とconsole.log($(this))でthisの下にあるかどうか確認しようとしましたが、何も示していません。私は間違って何をしていますか？

Answer 1

コードは機能しますが、リンクはデフォルトでリダイレクトされます。 preventDefaultを使用して既定の動作を防止する場合、期待どおりに動作することがわかります。

ただし、リンクを実際に自動的にリダイレクトするには、意味がありません。一方、それらを単にメニューとして使用してhref値に基づいてページ上の他のデータをロードする場合は、以下を使用してリンクを手動で処理することができます。

$("nav").on('click', '*', function(e) { 
 
    e.preventDefault(); 
 
    $(this).addClass('focused'); 
 
});

.focused{ 
 
background-color:yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <h1>Menu:</h1> <br> 
 
    <a href="/tests/add-new-test-link">Add link</a> 
 
    <a href="/tests/run-tests">Run tests</a> 
 
    <a href="/tests/reports-history">Test reports history</a> 
 
    <a href="/tests/links-list">Links list</a> 
 
</nav>