我制作了一个 test.html 文档来测试脚本。不知怎的，它不起作用，我不明白为什么什么也没有发生。脚本位于 -tags 中并用 -tag 包裹，CSS 也有它的 -tags。为什么它不起作用？这是代码
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
</script>
<style>
.current {
text-decoration: underline;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="about-link" class="current" href="#">ABOUT</a></li>
<li><a id="events-link" href="#">EVENTS</a></li>
<li><a id="reviews-link" href="#">REVIEWS</a></li>
<li><a id="contact-link" href="#">CONTACT</a></li>
</ul>
</div>
</body>
</html>
因为绑定事件处理程序的代码是在元素出现之前执行的DOM，事件未绑定到元素上。
要解决这个问题，您可以
- 将您的代码包装在
ready()回调，以便您的代码将在以下时间执行DOM已加载完毕
- 将脚本移至末尾
<body>，所以所有元素都存在于DOM你可以在上面绑定事件
Code:
$(document).ready(function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
});
EDIT
您还可以使用load(不建议) 事件回调来绑定事件，但这将等待所有资源完全加载。
如果你想使用 Vanilla Javascript，你可以使用DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded事件于document.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
