使用ajax加載主要內容

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 個解決方案

解決方案1
1 已采納 2019-06-06 09:17:26

NAV-bar.php

Main.php

使用ajax加載主要內容

問題描述

1 個解決方案

解決方案1 1 已采納 2019-06-06 09:17:26

NAV-bar.php

Main.php

解決方案1
1 已采納 2019-06-06 09:17:26