如何在HTML頁面中包含HTML側邊欄？

我已將我的頁面的側邊欄寫入HTML文件。我想在我的所有HTML頁面中包含相同的側邊欄。如何將側欄HTML文件包含到我的Dashboard.html文件中，以便側欄可見？如何在HTML頁面中包含HTML側邊欄？

如果不可能，請您提供備用解決方案嗎？

2016-10-18 Rose

看看這裏：HTTP：//計算器。 com/questions/8988855/include-another-html-file-in-a-html-file也許它會幫助你 – Arkej

看看這個教程，這可能會幫助你 - http://www.w3schools.com/howto/howto_html_include .asp – yashpandey

@Arkej感謝您的鏈接。我早先檢查過它，嘗試了那裏的建議。沒有幫助。 – Rose

您無法將HTML頁面直接包含在另一個HTML內。但是我們可以通過使用Jquery Load函數來實現這一點。見例如，

<html> 
<head> 
    <script src="/path/to/jquery.js"></script> 
    <script> 
    $(function(){ 
     $("#sidebar").load("sidebar.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="sidebar"></div> 
    </body> 
</html>

來源

2016-10-18 11:41:32

我在我的頁面中使用了Thymeleaf。使用這將在dashboard.html文件中爲行提供「Uncaught SyntaxError：意外標識符」。 – Rose

可以在角JS使用的角度指令做到這一點，如圖中保存.html文件側邊欄

假設你身邊吧dashboard.html

<ul> 
    <li><a> Home</a></li> 
    <li><a> About</a></li> 
    <li><a> Contact</a></li> 
    <li><a> Careers</a></li> 
</ul>

ngInclude

<div ng-include="'dashboard.html'"></div>

來源

2016-10-18 11:46:05 Surendra

試了一下。側邊欄沒有出現。但是也沒有得到任何錯誤。什麼可能是這個問題？ – Rose

您需要在指數angularjs，HTML – Surendra

您可以檢查此鏈接 http://www.w3schools.com/angular/tryit.asp?filename=try_ng_include – Surendra

有幾種方法可以這樣做。我推薦使用JQuery：

假設您在sidebar.html文件中有側邊欄的html代碼。

然後，在任何你想包括HTML文件，你應該創建一個div包含它和它加載sidbar.html內容：

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- ...or whereever you have jquery stored --> 
    <script> 
    $(function(){ 
     $("#sidebar").load("sidebar.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <!-- other content here --> 
    <div id="sidebar"></div> 
    <!-- other content here --> 
    </body> 
</html>

來源

2016-10-18 11:47:35 MarcM

這個建議和Vinod的一樣。請檢查我的評論。 – Rose

Thymeleaf的語法錯誤問題與html include技術無關。仔細檢查你的代碼。或與我們分享，以便我們可以看看。 – MarcM

如何在HTML頁面中包含HTML側邊欄？

回答

相關問題