HTML:独立的边栏和内容页

Question

我正在使用Bootstrap侧边栏。。。如何避免为子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文件的侧边栏。

谢谢，

Answer 1

您要查找的内容听起来像是包含单独文件的一种方式。这可以通过多种方式实现（假设您的菜单在一个名为menu.html的单独文件中）：

PHP:

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

jQuery:

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

HTML:

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

或者只是使用ajax。。看起来像这样：

$.ajax({
        url: "menu.html",
        async: false,
        success: function (data){
          // do somerthing
        }
    });

这样你只需要维护你的menu.html，并且在你包含它的任何地方都会进行更改。

Answer 2

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

所以基本上，你只回显侧边栏中选择的部分。那会有帮助的。

在单页网站的情况下，使用内置在twitter引导程序中的scrollspy可能会有所帮助。