javascript - 在“this”元素中添加一个类

原文 标签 javascript jquery

我试图将.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>





我试图通过thisconsole.log(this)检查console.log($(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/

相关文章:

javascript - 下划线/主干模板 .get

Javascript 模块声明 - 性能

javascript - 根据滚动位置更改CSS类

javascript - 正在进行的多个事件

jquery - jQuery click事件,如切换

jquery 将新 li 添加到嵌套集模型

javascript - 分支的HTML图

javascript - php和js相互之间的响应

javascript - 如何使用Laravel使用函数回调?

jquery - 添加Google饼图后,其他元素的最高值必须为负值