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>

对于每个algorithm01~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

用于避免加载html文件以用于导航目的的众所周知的方法是使用PHP。虽然它可能会使代码变得混乱（您将许多html文件集成到一个！）但它可以使您不必更改所有html文件中的公共代码。

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

如果是单页网站，使用内置在twitter-bootstrap中的scrollspy可能会有所帮助。

HTML：单独的补充工具栏和内容页面

2 个答案: