Question

我一直在寻找一种在每个页面上获得相同导航栏的方法。现在，我有一个加载到每个页面的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>

它似乎应该有效，然而，它并没有。非常感谢任何帮助，谢谢！

Answer 1

第一次：将<nav> ID设为

<nav id="nav">

第二次：您可以使用.load()代替.get() .. .load()代码应该是

$('#nav-placeholder').load("navigation.html #nav");

以上代码会将<nav id="nav">包装到<div id="nav-placeholder">
中

第3次：如果您需要替换，可以使用unwrap()代替..所以您的代码应该是这样的

$('#nav-placeholder').load("navigation.html #nav" , function(){
   $('#nav').unwrap();
});

第4次：我还不知道为什么你的<div id = "nav-placeholder"></div>在<head> 内，但是我测试了它的任何方式，代码甚至可以正常工作如果它被包裹到<head> ..

Answer 2

正如 Mohamed-Yousef 在评论中注意到您已将导航占位符div 元素放在 head 标记中，这是错误的地方。它应该在 body 元素内。

此 meta， css 和脚本标记必须位于 head 元素中。

＆＃13;

<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>

＆＃13;

JQuery get方法似乎无法正常工作

2 个答案: