Question

我的所有.html页面上都有一个导航栏div。为了不复制，请将导航条代码粘贴到每个页面上，我已经用该代码创建了一个.html页面，并通过jquery在每个页面上将其打印如下：

<div id="includeNavbar"></div>

实际打印的代码是：

$(function(){
      $("#includeNavbar").load("navbar.html"); 
});

是否有办法保持导航栏加载并通过jquery加载其余内容，但仍使用这种类型的打印方法？

我正在使用最新的Bootstrap版本

Answer 1

您的代码是将HTML文件加载到其他html文件中的简单方法。保持它。

您还可以将html文件类型更改为php，然后可以include或require放置您想要的文件。

nav-bar.php

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在您的Main.php页面上您需要另一个页面。

Main.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<?php require 'nav-bar.php'?>   


</body>
</html>

希望您能找到答案。：）

用ajax加载主要内容

1 个答案:

nav-bar.php

Main.php