我正在尝试将 .focused
类添加到 nav
菜单中任何单击的链接。
我写的简短脚本不起作用。谁能告诉我为什么?
$("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
下的内容,但是那里什么也没有显示。我做错了什么?
最佳答案
您的代码可以工作,但默认情况下您的链接将重定向。如果您通过使用 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>
关于javascript - 将类添加到 "this"元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44256830/