单击引导菜单botton时加载静态html

load static html when click bootstrap menu botton

本文关键字：加载 静态 html botton 菜单 单击      更新时间：2023-09-26

点击引导菜单时加载静态html的正确方法是什么？有一个index.html和content1.html，content2.html，它们都是静态的。但是，index.html的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大小的限制）。但我知道<frame>在html5上已经被淘汰了。

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

jquery方式

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

例如为了简单起见，假设您的页面有两个不同的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);
}

然后，你提出的每个请求都会加载你所需要的严格的最小值。你的风格完全是静态的。

主要的缺点是，如果页面结构不一致，它可能会变得非常复杂。如果是这样的话，我只能建议您使用"经典方式"或javascript框架，这将在一定程度上简化这个过程。

Bootstrap方式

Bootstrap作为一种内部方式，通过预先加载所有内容，可以在标签页上完成您想要的操作。如果您的内容是轻量级的，那么这样做并不是一件愚蠢的事情。

经典的方式

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

相关文章：