我在使用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中?
DISCLAMER:我知道已经有类似的问题出现了,但是我已经检查过了,仍然不能让它工作。
https://stackoverflow.com/questions/51090310
复制相似问题