在所有頁面中包含HTML導航欄

我有一個導航欄，我想在單獨的html文件中使用，然後在所有其他頁面中使用。我覺得它會讓代碼看起來更整潔，更有條理。但是，我遇到了一些麻煩。我開始試圖修復主頁，這是我所：在所有頁面中包含HTML導航欄

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home Page</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="import" href="navigation.html"> 


    </head> 

<body> 



<br><br> 
<div class="zoom pic"> 
<center> <img src="images/technology.png" alt="portrait"> <center> 
</div> 


</body> 

</html>

這是在一個單獨的HTML文件中的導航欄，但在完全相同的目錄中所有我的其他HTML文件。

這是否有助於navigation.html文件什麼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home Page</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

</head> 



<center> <b>World Congress CS-IT Conferences 2016</center> 
<div id="horizontalmenu"> 
    <ul> 
    <li><a href="index.html" title="Home Page">Home<br/></a></li> 
    <ul> <li><a href="information.html">General Information</a> <ul> 
     <li><a href="about.html">About</a></li> 
     <li><a href="fee.html"> Conference Fee</a></li> 
     <li><a href="hotel.html">Hotel</a></li> </ul> 
    <li><a href="keynote.html" title="Speakers">Keynote Speakers<br/></a></li> 
    <li><a href="call.html" title="Call for Papers">Call for Papers<br/></a></li> 
    <li><a href="dates.html" title="Important Dates">Important Dates<br/></a></li> 
    <li><a href="major.html" title="Major Areas">Major Areas<br/></a></li> 
    <li><a href="paper.html" title="Submit a Paper">Paper Submission<br/></a></li> 
    <li><a href="reviewer.html" title="Login">Login<br/></a></li> 
    <li><a href="register.html" title="Register online">Registration<br/></a></li> 
    <li><a href="conference.html" title="Conference">Conference Program<br/></a></li> 
    <li><a href="guidelines.html" title="Guidelines">Guidelines<br/></a></li> 
    <li><a href="comments.html" title="Comments and Feedback">Comments<br/></a></li> 
    </ul> 
</nav></b>

我現在的問題是，我沒有看到導航欄現在在我的主頁！關於如何解決這個問題的任何想法？任何幫助是極大的讚賞！！！！

來源

2015-10-24 Vortex11

您將需要PHP，SSI或Jquery Ajax調用 –

或者您可以使用模板語言並使用諸如middleman或jekyll之類的東西來託管，以便您可以使用partials。檢查此鏈接：https://middlemanapp.com/basics/partials/ – luke

PHP可以幫助您做到這一點。

將您的導航欄代碼保存在navbar.php文件中，並將此文件包含在您想要導航欄的頁面中。例如，如果你想在index.php文件中包含導航條，你可以像這樣包含它。

include_once("navbar.php");

您需要一臺運行php代碼的服務器。您不能直接在其他HTML文件中包含HTML文件。

來源

2015-10-24 19:42:24

好吧，我會嘗試。我有通過XAMPP運行的apachne。在我的html文件中，我可以放置該行嗎？ – Vortex11

然後它工作得很好。 –

您可能必須將您的home.html更改爲home.php才能讓PHP在您的主頁上運行上述代碼 –

這也可以使用jQuery來完成。在這裏，你需要在navigationBar.html中寫入令人興奮的html，並且在你想要包含它的任何頁面中創建一個id爲#nav的空元素，並在腳本中替換它的內容。

$.get("navigationBar.html", function(data){ 
    $("#nav").replaceWith(data); 
});

這也可以使用HTML5標籤的進口http://blog.teamtreehouse.com/introduction-html-imports

檢查這個環節如果u想要完成的。

來源

2017-10-23 06:05:14

在所有頁面中包含HTML導航欄

回答

相關問題