嗨,我正在尝试通过使用jQuery load()实现DRY。我想在每个页面上都有navbar.html,并由load()调用,而不是在每个html上都有它。目前,我所有的文件都位于同一目录中,但似乎无法在服务页面上加载导航栏。请在下面查看我的代码。我认为有一个简单的解决方案,也许是我的语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A_D Acupuncture in Amsterdam | Best In Amsterdam</title>
<meta name="description" content="A_D Ac upuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:title" content="A_D Acupuncture in Amsterdam | Best In Amsterdam">
<meta property="og:image" content="facebook-card.jpg">
<meta property="og:description" content="A_D Acupuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:site_name" content="A_D Acupuncture"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lora:700|Merriweather" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js" async=""></script>
你好世界/ *测试* /
<-- Navbar.html -->
<div class="navbar-ad">
<div class="navbar-logo">
<a href="#"><img id="logo" src="../images/logo.png"></a>
</div>
<div class="navbar-right">
<a href="index.html" target="_blank" class="navbar-items navbar-home">Home</a>
<a href="services.html" target="_blank" class="navbar-items navbar-services">Services</a>
<a href="contact.html" target="_blank" class="navbar-items navbar-contact">Contact</a>
</div>
</div>
$(document).ready(() => {
$("#nav-placeholder").load("navbar.html");
$('#h1').html("heeey") /* test line to make sure filepath is correct */
});