Question

我已将页面的侧边栏写在HTML文件中。我想在所有HTML页面中包含相同的侧边栏。如何将侧边栏HTML文件包含在我的Dashboard.html文件中，以便侧边栏可见？

如果不可能，请提供替代解决方案吗？

Answer 1

您无法将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>

Answer 2

您可以在角度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>

使用angular指令ngInclude

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

Answer 3

有几种方法可以做到这一点。我建议使用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>

如何在HTML页面中包含HTML侧边栏？

3 个答案: