HTML包含帶有相對鏈接的導航元素

Question

我在多個頁面中都包含了一個導航元素，如下所示： <script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script> <script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>

但這僅適用於同一目錄“ subdir”中的html文件。 從上部主目錄“ dir”中的index.html無法訪問navigation.html。 如果我將上部模式添加到navigation.html上方目錄中的index.html中，則可以正確訪問，但相對鏈接不再起作用。 我不想用絕對路徑替換相對鏈接。 是否可以根據其調用來源在navigation.html不同鏈接之間切換？ 還有其他想法嗎？ 非常感謝！

Answer 1

由於這是一個多頁網站，在其所有頁面上都重復使用相同的菜單，因此page1.html和index.html之間的功能或邏輯上沒有區別，除了索引可能是您看到的第一頁。 因此，我只需要將index.html放在同一文件夾中，然后命名為一天即可。 如果索引頁會將所有其他頁面加載到自身中，則將其設置為較高級別是有意義的。 然后，該菜單僅需要包含在索引頁面上。

文件夾結構是項目要求，而不是技術要求。 在開發中，所有頁面都同樣分為子目錄，以便組織文件。 但是通過運行部署腳本將所有內容復制到生產環境中，部署腳本無論如何將所有內容連接到一個文件中，整個文件夾結構消失了。

擁有清晰的文件夾結構用於按業務需求組織的開發是完全正常的，並且對於按技術需求組織的實時代碼也具有完全不同的文件夾結構。

Answer 2

您必須提供navigation.html文件的路徑。

$（function（）{$（“＃includedNavigation”）。load（“ ./ dir / navigation.html”）;}）;

像這樣

Answer 3

你能用這樣的東西嗎

<link rel="import" href="navigation.html">

要么

$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });