Question

我想建立一个有多个页面的网站，但由于有一个独特的导航栏，我不能简单地链接到每个页面的新文件。实现这一目标的最佳方法是什么？我能想到的一些可能性是将所有这些都放在一个页面上，但是使用css和javascript将其他页面移出屏幕，或者使用iframe并使用javascript加载它们。有人可以指导我一些例子或教程吗？

Answer 1

我认为您最好的选择是使用iframe。

将每个iframe的src设置为您要在小div中显示的页面。

这应该这样做

Answer 2

使用jQuery加载从导航中单击的页面。只需要一个包含分隔符（<div>），页面将加载到其中。

这将加载页面而不重新加载。

IFF（不是拼写错误，意思是“If and Only If”）你想要支持没有启用Javascript的浏览器，使用iFrame，但是然后在你的javascript中将它从浏览器中删除，因为使用iFrame是非常糟糕的做法。

<script>
$(document).ready(function(){
 $("iframe").remove();
 $("body").append("<div id='page_container'></div>");
 $("#navigation_bar a").click(function(e){
  e.preventDefault();
  $("#page_container").load("http://www.example.com/"+this.attr("href"));
 });
});
</script>

HTML看起来像：

<body>
 <nav>
  <a href="link1.html" target="frame">Link1</a>
  <a href="link2.html" target="frame">Link2</a>
 </nav>
 <iframe src="link1.html" name="frame"></iframe>
</body>

未经测试，但概念应该有效（http://jsfiddle.net/Ns2Gx/）

如何在一个页面中拥有网站的多个部分

2 个答案: