HTML中所有頁面的導航菜單

我有兩個HTML文檔將鏈接到同一個網站。如何創建導航菜單，我只需要編輯一次，因爲它的更改將應用於菜單所在的所有HTML文檔？HTML中所有頁面的導航菜單

我是一名HTML初學者，已經學會了基礎知識，但您能否幫忙？

這是菜單代碼：

<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="videos.html">Videos</a></li> 
    <li><a href="games.html">Games</a></li> 
    <li><a href="apps.html">Apps</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

來源

2014-12-02 JDS404

在純HTML沒有。在服務器上使用JavaScript或其他東西，比如PHP。 – 2014-12-02 17:41:27

使用HTML完成它的唯一方法是將導航HTML作爲iFrame（不包含其他頁面）包含在其他頁面中。更好的做法是在PHP中編寫代碼，然後按照這種方式包含導航。 – APAD1 2014-12-02 17:41:55

APAD1建議您是最佳選擇。一個簡單的包含頁眉/頁腳將使它，所以你可以編輯一次，並改變所有頁面。有框架的網站是......好吧......我不會。 – 2014-12-02 18:08:23

-2

如果我理解正確，你需要包含一些HTML文件到另一個。使用HTML少於5的版本，你不能這樣做沒有JavaScript。如果您不想使用PHP/Java/.NET解決方案，請使用jQuery的最佳解決方案。但不要忘記，您將需要使用本地服務器（例如，Apache）。

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" /> 
    <script type="text/javascript" src="script.js"/> 
    </head> 
    <body> 
    <div id="menu"> 
    </div> 
    </body> 
</html>

的script.js：

$(document).ready(function(){ 
    $.get("menu.html", function(data) { 
    $("#menu").html(data); 
    }); 
});

菜單。HTML：

<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="videos.html">Videos</a></li> 
    <li><a href="games.html">Games</a></li> 
    <li><a href="apps.html">Apps</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

JQuery的：jquery.com

文檔：api.jquery.com/html

來源

2014-12-02 18:35:14

謝謝 - 這有幫助！ – JDS404 2014-12-02 20:17:45

您是不是要說「script.js」而不是「script.html」？ – JDS404 2014-12-02 20:27:45

我不會使用這個解決方案。如果JavaScript被禁用它不會工作。再加上它看起來像是矯枉過正。 – 2014-12-02 21:08:17

你將不能夠只用純HTML做到這一點。

幾個選項：

使用Javascript - 使用JavaScript，你可以追加導航到每一頁。

PHP - 使用PHP將是最簡單的，您可以將您的導航作爲包含在您的代碼中的方式進行處理。

在我看來，你應該使用PHP .. JavaScript是對這種特殊情況矯枉過正。我通常做的是創建一系列構成我網站結構的php文件。

一個簡單的結構將是

head.php
的index.php

創建一個PHP文件名爲head.php，你可以做到這一點使用記事本，記事本++，NetBeans的等..

head.php

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<!-- NAVIGATION SECTION HERE --> 
<div class="nav"> 
<ul> 
    <li><a href="http://google.com">First link</a></li> 
</ul> 
</div>

的index.php或其他網頁

<?php include "head.php"; ?> 

<div> 
content of html page 
</div> 

<div class="footer"></div> 

</body> 
</html>

如果你在你的index.php看到一個包含語句頂部通知。這會將head.php內容添加到您調用此頁面的任何頁面。由於您的導航部分位於head.php中，因此您的導航將在所有頁面中統一。

爲此，請確保您的主機允許您使用php。

來源

2014-12-02 18:23:56 bmedart

非常感謝！ – JDS404 2014-12-02 20:18:15

這應該是被接受的答案。 – APAD1 2014-12-03 15:48:25

HTML中所有頁面的導航菜單

回答

相關問題