gpt4 book ai didi

javascript - JQuery get 方法似乎不起作用

转载 作者:行者123 更新时间:2023-12-01 03:31:12 25 4
gpt4 key购买 nike

我一直在寻找一种在每个页面上获得相同导航栏的方法。现在,我有一个加载到每个页面上的 jQuery 脚本,它应该替换 div 占位符;但是,当我运行该程序时,导航栏根本不存在。

JQuery 代码:

$(function() {
$("#dropdown").hover(function() {
$("#submenu").stop();
$("#submenu").slideToggle(500);
});

$("#submenu").hover(function()
{
$("#submenu").stop();
$("#submenu").slideToggle(500);
});

$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
});

导航文件:

<nav>
<a href = "index.html">CV Game Development</a>
<div class="menu">
<div id="dropdown">Tutorials</div>
<div id="submenu">
<a href="beginner.html">Beginner</a>
<a href="intermediate.html">Intermediate</a>
<a href="advanced.html">Advanced</a>
</div>
</div>
</div>
</nav>

实际使用的 HTML 文件:

<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
<head>
<title>CV Game Development</title>
<div id = "nav-placeholder"></div>
</head>
<body>
<h1 id = "intro">Welcome</h1>
<h3 id = "subintro">to the CV Game Development website</h3>

<p id = "info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>

看起来应该有效,但事实并非如此。非常感谢任何帮助,谢谢!

最佳答案

正如 Mohamed-Yousef 在评论中注意到的那样,您已将 nav-placeholder div 元素放置在 head 标记中,这是错误的位置。它应该位于 body 元素内。

此外,您的 meta、 cssscript 标记必须位于 head 元素中。

<html>

<head>
<title>CV Game Development</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
</head>

<body>
<div id="nav-placeholder"></div>
<h1 id="intro">Welcome</h1>
<h3 id="subintro">to the CV Game Development website</h3>

<p id="info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>

</html>

关于javascript - JQuery get 方法似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44529006/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com