Question

我的网站使用导航栏打开和关闭div来转到不同的“页面”。最近按钮已停止响应（单击时没有任何反应，控制台中没有任何内容），我无法找出原因。

我的导航栏的格式如下：

<a href="#" id="videosButton">videos</a><br>
<a href="#" id="graphicButton">graphic design</a><br>
<a href="#" id="webButton">web design</a><br>

我的网页格式如下：

<div id="videos" class="page">Videos page</div>

JS是：

$('#videosButton').click(function () {
document.body.style.backgroundColor="rgb(192,57,43)"
$(".page").hide();
$('#videos').show();
});

每个按钮

。我的JS文件正在加载，我可以在控制台中查看它，所以这不是问题。我一直在努力奋斗几个小时，我不知所措。任何人都可以帮助我理解为什么导航栏没有按预期运行？

编辑：我已将外部JS和jQuery移至关闭</body>标记之前，问题仍然存在。如果有人认为我发布的代码中没有问题，我已经在http://hdf.bl.ee/test/index.html建立了完整的网站。

Answer 1

可能的原因是你在元素存在之前运行代码，因此$("videosButton")不匹配任何元素，因此不会挂钩任何处理程序。确保代码位于<{1>}标记之后 HTML中元素的标记，或者作为第二种最佳方法，使用jQuery的script回调。如果你这样做，函数将被调用：

ready

$('#videosButton').click(function () { document.body.style.backgroundColor="rgb(192,57,43)" $(".page").hide(); $('#videos').show(); });

Answer 2

事实证明这个问题完全是另一回事。即使我将我的网站的外部JS文件和jQuery的链接移动到</body>标记，它们也被忽略了，因为我在<script>中留下了一个<head>（链接到Google API）。当我用其他脚本移动它时，一切都突然开始工作。我不确定为什么会导致其他脚本被忽略，但它解决了我的问题。

Javascript函数未被调用

2 个答案: