尝试使用jQuery load()实现DRY

时间:2019-01-25 13:31:59

标签: javascript jquery html

嗨,我正在尝试通过使用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 */
});

0 个答案:

没有答案