将一个类添加到"这个"元件

时间:2017-05-30 08:08:07

标签: javascript jquery

我正在尝试将unable to resolve class my.example...课程添加到.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>this检查console.log(this)下的内容,但没有显示。我做错了什么?

1 个答案:

答案 0 :(得分: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>