如果我有一段HTML在多個html文件中通用，那么我可以在自己的.html文件中擁有它嗎？

Question

標題可能有點令人困惑，對此感到抱歉。 讓我澄清一下。

因此，在我的網站中，該網站的每個.html頁面上都有一個<nav>部分。 如果要更改導航菜單，則必須在每個頁面上進行更改。

有沒有辦法可以在自己的.html文件（例如nav.html）中包含該<nav>部分，然后在每個站點的.html頁面上生成它？ 這樣，如果我需要進行更改，則只需在單個文件（即nav.html）中進行更改，並且在運行時仍將在所有頁面上進行更新。

如果我能以某種方式做到這一點，那么如果按下當前頁面的導航按鈕，如何使其滾動到頁面頂部？

因此，如果我在photos.html上，並且單擊導航欄上的“照片”鏈接（通常會將我帶到photos.html），我可以使其不刷新頁面而是直接轉到頂部嗎？ ？ （即<a href="#">Photos</a> ）

Answer 1

有沒有一種方法可以讓我將該節放在自己的.html文件中（例如nav.html），然后在每個網站的.html頁面上生成它？

您可以將.load()或$.get()與.append()或.prepend() 。

$(function() {
  $.get("nav.html")
  .then(function(html) {
    $("body").prepend(html);
    $("a[href='#']:contains(Photos)").on("click", function(e) {
      e.preventDefault();
      $("html, body").animate({
        scrollTop:0
      }, 1000);
    });
  });
});

Answer 2

為了使Navbar僅存在於一個文件中，jquery的.load或.get函數將是guest271314答案中所述的最簡單的解決方案。 盡管我會做更多類似的事情來加載內容：

$(document).ready(function() {
    $('#nav-container').load('nav.html');
});

我意識到這意味着您將需要在每個頁面上<div id="nav-container"></div> ，但這對我來說似乎是一個更干凈的解決方案。

對於頁面跳轉，您可以像這樣簡單地在href中使用id 。 這樣可以使頁面滾動到div的頂部，其中包含您在href輸入的id 。

<div id="pictures"></div>
<a href="#pictures">Pictures</a>

您還可以添加一些jQuery以使頁面平滑跳轉。 下面的腳本來自此CSS-Tricks文章，它將使該頁面平滑跳轉。

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Answer 3

我會創建一個名為navMenu.php之類的包含文件，其中僅包含您的導航菜單代碼。

<nav> menu code here </nav>

然后，您要包含此代碼的每個頁面都使用擴展名.php重命名。
然后，在這些其他頁面中的任何位置，您都希望包括此導航菜單代碼

<?php require 'navMenu.php' ?>

請參閱： http : //php.net/manual/en/function.require.php