如何使用只有一個導航條碼頁面的HTML5頁面只能使用HTML和CSS？

我有很多html頁面。是否有可能使用僅HTML5和CSS在一箇中心位置存儲/管理導航菜單？這意味着所有的導航代碼都放在一個文件中，所以當菜單發生變化時，我不必在每個頁面上編輯代碼。如何使用只有一個導航條碼頁面的HTML5頁面只能使用HTML和CSS？

感謝，道格拉斯

只有當你使用（i）幀時，這是你不想做的事情。使用能夠將文件包含在其他文件中的編輯器（以便在保存時將創建完整文件）或可以動態執行此操作的服務器端技術。 – CBroe

你應該可以欺騙一些有條件的樣式，基於元素狀態（：focus，：checked等）的css聲明。我認爲如果你像TabPanel元素一樣準備多個視圖，顯示基於條件css的每個選項卡，你可能可以解決這個問題。 – Sebas

但是如果你需要的是增加維護，爲什麼不直接在頁面之外存儲導航面板的html代碼，並將其包含在所有需要的頁面中？ – Sebas

是的，可以。在1990年早期人們使用的iFrame：

<iframe src="menu.html"></iframe> 
<iframe src="content.html" name="content"></iframe>

比所有菜單項將有target="content"附加修改iframe的鏈接。

2017-01-16 13:49:56 Justinas

我認爲你的意思是框架，而不是內聯框架（我在那裏「在1990年初」......）但是人們因爲很好的理由而停止這樣做。 – Johannes

我還記得他們正在使用，甚至遲到1990年中... –

不幸的是，「iframes」直到今天仍在使用。 – DomeTune

查看您的Web服務器的功能;例如，Apache's SSI。這是關於幀的最小進步，正如其他人指出的那樣，最好避免。服務器端包含非常簡單的HTML。

2017-01-16 13:54:24

您可以使用iframe的這樣做就像

<iframe src="Header.html"></iframe> 
<iframe src="restOfThePage.html" name="content"></iframe>

但這不是這樣做的最佳方式，這是網站是如何建造在天回。但是因爲你正在考慮重用代碼，所以你應該考慮使用像handlebars這樣的模板引擎或者像Angular這樣的完整的MVC框架。它會幫助你建立這些類型的應用程序，並會很好，但它對你的簡歷也很好

2017-01-16 13:58:27

沒有很好的解決方案，只能使用HTML和CSS。

但是，您可以使用靜態頁面生成器，如Jekyll,Hexo或Hugo。使用它們，您可以指定要包含在每個頁面上的導航，然後相應地生成HTML/CSS文件。

2017-01-16 13:59:02 str

您可以使用iframe來實現您的目標。

在你的index.html文件中有一個導航菜單，頁面上有一個iframe。

的iframe應該有一個name屬性，像這樣的：例如

<iframe name="pages" src="main.html"><iframe>

在導航菜單中的每一個環節都應該有target屬性與pages（iframe的名稱）的值：

<a href="page1.html" target="pages">page 1</a> <a href="page2.html" target="pages">page 2</a>

這樣，鏈接將在iframe中打開，而不是在父頁面中打開，因此n航空菜單仍然存在。

2017-01-16 14:05:47 Ron537

它只是另一種方式的預測建立一個沒有任何工具的導航。它幾乎是「只有HTML」。您可以使用：

document.write('<div id="navigation">') 
document.write('<div class="navItem">Enter your HTML (HREF)...</div>') 
document.write('</div>')

你必須把它保存爲JavaScript文件： navigation.js。然後你可以在每個html中包含它：

<script type="text/javascript" src="../src/includes/navigation.js"></script>

也許它有幫助。

2017-01-16 14:26:20 DomeTune

回答