单击bootstrap菜单按钮时加载静态html

Question

点击引导程序菜单时加载静态html的正确方法是什么？ 有一个index.html和content1.html，content2.html所有这些都是静态的。 但是，index.html＆＃c; css与content1.html和content2.html不同。

布局会像

Menu [content1] [content2]
--------------------------
content of content1

一个愚蠢的解决方案是：

1. 使用菜单栏生成所有内容。
2. index.html与content1.html相同。
3. 菜单栏只使用<a href="content1.html">content1</a>作为链接

缺点：css应修改为相同的样式。

有没有更好的解决方案？

我想知道是否可以在菜单下方设置<iframe>并动态更改内容。 或者，使用<frame>更好（不受iframe大小限制）。 但我知道html5会逐步取消<frame>。

Answer 1

我看到了3种做你想做的事情（可能还有更多）。

jquery方式

你可以通过javascript函数同步加载（a）content1 / content2。 实际上，不建议以这种方式加载html，但是如果你的内容有一个可以用json / xml格式描述的公共结构，然后通过js函数解析并插入你的页面，这似乎是一种聪明的方法。

例如 假设为了简单起见，您的页面有2个不同的div区域。

你将制作一个json（xml也是有效的.html是可接受但不推荐的）对象代表你的页面：

{
  title:"hello world",
  text:"this is me"
}

然后你将使用jquery使用ajax加载它。完成后，只需将其插入：

success= function(data){
  var $content = $("#content");
  $content.empty();
  $("<h1/>").text(data.title).appendTo($content);
  $("<div/>").addClass("myTextStyle").text(data.text).appendTo($content);
}

您所做的每个请求都会加载您所需的最低限度。你的风格完全是静态的。

主要缺点是，如果您的网页结构不一致，它会变得非常复杂。如果是这种情况，我只能建议您使用“经典方式”或javacript框架，这将有点简化这一过程。

引导方式

Bootstrap在内部通过预先加载所有内容来完成您想要的with tabs。如果您的内容是轻量级的话，这不是一件蠢事。

经典的方式

在每个链接上重新加载页面，后端模板解析器在每个页面上重新创建具有正确内容的相同标头。这不是真正的现代方式，但仍然比没有好......只是你必须忘记你可以用bootstrap设置的那些漂亮的css过渡。