HTML：单独的侧栏和内容页

我正在使用引导边栏和。。。如何避免对子HTML文件重复侧栏HTML代码？因为如果我突然想更改侧边栏菜单标题，我必须手动更改每个子html文件中的所有标题

基本上我想要的是保留侧边栏，让用户向下滚动内容页面。我有几个单独的html文件，它们从侧栏链接

  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li><a href="algorithm.html">Algorithm</a></li>
      <li><a href="algorithm01.html">01: Algorithm & Sort</a></li>
      <li><a href="algorithm02.html">02: Data Structure 1</a></li>
      <li><a href="algorithm03.html">03: Data Structure 2</a></li>
      <li><a href="algorithm04.html">04: Graph 1</a></li>
      <li><a href="algorithm05.html">05: Graph 2</a></li>
      <li><a href="algorithm06.html">06: Greedy Algorithm</a></li>
      <li><a href="algorithm07.html">07: Dynamic Programming</a></li>
      <li><a href="algorithm08.html">08: N Queen</a></li>
      <li><a href="algorithm09.html">09: Programming Challenge 1</a></li>
      <li><a href="algorithm10.html">10: Programming Challenge 2</a></li>     
    </ul>
  </div>

对于每个算法01~10文件的内容

  <div id="page-content-wrapper">

如上所述，我希望分离侧栏代码，并且仍然希望在侧栏下保留几个子html文件的侧栏

---

谢谢，

一个众所周知的避免加载用于导航目的的html文件的方法是使用PHP。虽然这可能会使代码看起来很混乱（您正在将许多html文件集成到一个文件中！），但它可以避免您更改所有html文件中的通用代码

因此，基本上，您只回显侧边栏中选定的部分。那会有帮助的

---

对于单页网站，使用内置在twitter引导程序中的

scrollspy

可能会有所帮助。

您所寻找的内容听起来像是一种包含单独文件的方式。 这可以通过多种方式完成（假设您的菜单位于名为menu.html的单独文件中）：

PHP:

<?php include("menu.php"); ?>

$(function(){
  $("#includedContent").load("menu.html"); 
});

<object type="text/html" data="menu.html"></object>

HTML:

<?php include("menu.php"); ?>

$(function(){
  $("#includedContent").load("menu.html"); 
});

<object type="text/html" data="menu.html"></object>

---

这样，您只需维护menu.html，所做的更改适用于包含它的所有地方。

您确定不希望所有编号的列表项都成为第一个列表项的子项吗？似乎更符合逻辑。谢谢，这是可行的，但我尝试的html方式有点棘手，因为要用bootstrap保持相同的布局，所以我无法适应它原来的方式。谢谢