我不知道这段代码中发生了什么:/。代码是正确的,我什至附加了 jQuery 库文件,但它仍然不能正常工作。我想为选定的 li
应用一个类,而不是其余的。
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type="text/css">
a.active {
background-color:yellow;
}
</style>
<script>
$('li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
</script>
</head>
<body>
<ul>
<li><a href="#1">Photography</a></li>
<li><a href="#2">Web</a></li>
<li><a href="#3">Print</a></li>
</ul>
</body>
</html>
最佳答案
更改为:
<script>
$(document).ready(function(){
$('li a').click(function (e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});
</script>
我添加了一个 ready()函数:DOM 完全加载时执行的函数。
发生的事情是,当 jQuery 正在寻找那些元素以附加点击处理程序时,它们尚未加载,因此 $('li a')
为空。
另一种方法是将脚本放在 body 标记结束之前。
关于JavaScript 在 JSFiddle 中运行,但不能独立运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19183308/