Fatal编程技术网
  • javascript/
  • Javascript 使用jquery将头加载到html文件中

Javascript 使用jquery将头加载到html文件中

javascript jquery html

Javascript 使用jquery将头加载到html文件中,javascript,jquery,html,Javascript,Jquery,Html,我在使用JQuery的load函数时遇到问题。我正试图将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

我在使用JQuery的load函数时遇到问题。我正试图将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>

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


标题

    

  • 

    • 

  • 

    • 

  • 

    •
我还有一个index.html文件。我身体的顶端是
在我的身体底部是

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


$（文档）.ready（函数（）{
$（“#header”）.load（“header.html”）；
});
为什么我的标题没有加载到div中

DISCLAMER：我知道已经有类似的问题了，但我已经讨论过了，仍然无法解决这些问题。

Index.html需要有一个名为header的元素id。如果没有此元素，则load不会激发：

“如果选择器没有匹配任何元素—在本例中，如果文档不包含id=”header“的元素—则不会发送Ajax请求。”

我想您应该将header.html中的内容包装到一个id为的div中，然后将该id传递到load中，以便只获取该div的内容，并将内容放入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>

<div id='header'> ...</div>
我不知道您的代码库是什么样子的，但因为它是AJAX，所以我认为首先要确保您在web服务器上运行此代码

其次，由于您仅从header.html加载头，因此可以在加载函数中指定如下内容：

$("#header").load("header.html #firstHeader");
将#firstHeader的ID分配给header.html中的header标记，这应该可以工作。

控制台中出现了哪些错误？你能把这个问题复制成一个代码片段，这样我们就可以看到它失败了吗？就是这样，我在本地运行它，我只是在wamp上运行它，它工作了