将一个类添加到“this”元素

我试图将.focused类添加到nav菜单中的任何点击链接。将一个类添加到“this”元素

我写的简短脚本不起作用。有谁能告诉我为什么请吗？

$("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>

我想检查什么是this下通过console.log(this)和console.log($(this))但没有显示有。我究竟做错了什么？

来源

2017-05-30 divHelper11

' '点击'， '*'，'不应该被这个' '点击'， 'A'，' – guradio

因为你重定向到_that_页？ – Tushar

你的脚本可以工作，但我想它“不”，因为当你点击一个链接时，你会重定向到另一个页面。 –

您的代码有效，但您的链接默认会重定向。如果您使用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>

来源

2017-05-30 08:12:59 Nope

将一个类添加到“this”元素

回答

相关问题