Question

使用JQuery的加载功能时遇到问题。我正在尝试将header.html文件加载到我的index.html文件中，并且无法正常工作

假设我有一个名为header.html的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Header</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <a class="navbar-brand" href="#">Fitness</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            </div>
        </nav>
    </header>
</body>
</html>

我也有一个文件index.html。 <div id="header"></div>是我身体的顶端

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
  $(document).ready(function () {
    $("#header").load("header.html");
  });
</script>

为什么我的标头不加载到div中？

免责声明：我知道已经有类似的问题，但是我经历了这些问题，但仍然无法解决这个问题。

Answer 1

Index.html必须具有名为header的元素ID。如果没有此元素，则不会触发加载：http://api.jquery.com/load/

“如果选择器没有匹配任何元素-在这种情况下，如果文档中不包含id =“ header”的元素-则不会发送Ajax请求。”

我认为您想将header.html中的内容包装到具有ID的div中。然后将该id传递给load，以仅获取该div的内容，并将其放入index.html中的元素中。

所以在header.html内部

<div id='header'> ...</div>

Inside Index.html：

<div id='dynamic-header'> ... </div>

然后在index.html中进行jquery：

 $( "#dynamic-header" ).load( "header.html #header" );

Answer 2

不知道代码的外观，但是因为它是AJAX，所以首先要确保您在Web服务器上运行此代码。

第二，由于您仅从header.html加载标头，因此您可以像这样在加载函数中指定该标头：

$("#header").load("header.html #firstHeader");

将#firstHeader的ID分配给header.html中的标头标记，这应该可以工作。

使用jQuery将标头加载到html文件中

2 个答案: