HTML：单独的侧栏和内容页面

本文介绍了HTML：单独的侧栏和内容页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用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.