HTML：单独的侧栏和内容页面 [英] HTML : Separate Sidebar and contents page

问题描述

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

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

 < div id =sidebar-wrapper> 
< ul class =sidebar-nav> 
< li>< a href =algorithm.html>算法< / a>< / li> 
< li>< a href =algorithm01.html> 01：Algorithm&排序< / a>< / li> 
< li>< a href =algorithm02.html> 02：数据结构1< / a>< / li> 
< li>< a href =algorithm03.html> 03：数据结构2< / a>< / li> 
< li>< a href =algorithm04.html> 04：图1< / a>< / li> 
< li>< a href =algorithm05.html> 05：图表2< / a>< / li> 
< li>< a href =algorithm06.html> 06：贪婪算法< / a>< / li> 
< li>< a href =algorithm07.html> 07：动态规划< / a>< / li> 
< li>< a href =algorithm08.html> 08：N Queen< / a>< / li> 
< li>< a href =algorithm09.html> 09：编程挑战1< / a>< / li> 
< li>< a href =algorithm10.html> 10：编程挑战2< / a>< / li> 
< / ul> 
< / div> 
  

并且对于每个algorithm01〜10文件的内容，

 < div id =page-content-wrapper> 
  

如上所述，我想分开侧边栏代码，但仍然要保留边栏几个子

感谢，

解决方案

你正在寻找的声音像一种方式，包括一个单独的文件。
这可以通过多种方式完成（假设您的菜单在一个名为menu.html的单独文件中）：

PHP：

 <？php include（menu.php） ？> 
   
 
 
 
  jQuery ：
  $（function（）{
 $（＃includedContent）。load（menu.html）; 
}）; 
  
  HTML： 
 < object type =text / htmldata =menu.html>< / object& 
  
或者只是使用ajax ..它看起来像这样：
  $。ajax（{
 url：menu.html，
 async：false，
 success：function ）{
 // do somerthing 
} 
}）; 
  
这样，你只需要维护你的menu.html， 
 
I am using Bootstrap sidebar and... How do I avoid repeating the sidebar HTML code for sub-html files? Because if I suddenly want to change the sidebar menu titles, I have to manually change them all in each of sub-html files.

Basically what I want is to keep the sidebar and let the user scroll down the contents page. And I have several separate html files that are linked from the side-bar. 
  <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>
And for contents for each algorithm01 ~ 10 file,
  <div id="page-content-wrapper">
As mentioned above, I want to separate the sidebar code and still want to keep the sidebar for several sub-html files under the sidebar.

Thanks,
解决方案
What you are looking for sounds like a way to include a separate file.
This can be done in a number of ways (assuming your menu is in a separate file named menu.html):

PHP:
<?php include("menu.php"); ?>
jQuery:
$(function(){
  $("#includedContent").load("menu.html"); 
});
HTML:
<object type="text/html" data="menu.html"></object>
or just using ajax.. which would look something like this:
$.ajax({
        url: "menu.html",
        async: false,
        success: function (data){
          // do somerthing
        }
    });
That way you'd only have to maintain your menu.html and changes apply everywhere you included it.

                        
这篇关于HTML：单独的侧栏和内容页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！