<分区>
标签 javascript html css
我想制作一个包含多个页面的网站，但由于导航栏的独特性，我不能简单地为每个页面链接到一个新文件。完成此任务的最佳方法是什么。我能想到的一些可能性是将它们全部放在一个页面上，但使用 css 和 javascript 将其他页面移出屏幕，或者使用 iframe 并使用 javascript 加载它们。有人可以指导我查看一些示例或教程吗？
最佳答案
使用 jQuery 在从导航中单击页面时加载页面。只需包含一个分隔符 ( <div> )，页面将加载到该分隔符中。
这将在不重新加载的情况下加载页面。
IFF(不是拼写错误，它的意思是“当且仅当”)您想要支持未启用 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/)
关于javascript - 如何在一个页面中包含网站的多个部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13548407/
相关文章：
javascript - 如何在这个函数调用中使 "modal conformation"功能起作用？
javascript - 修复 bootstrap 折叠中的笨拙转换并删除 .well 中的已访问链接样式
javascript - 当我只需要其中的 Checkbox 的 ng-click 时，如何不触发 TR 的 ng-click
javascript - 向下移动整个 html 页面时出现问题! html 元素的 margin-top 不适用于所有页面
javascript - 可滚动属性网格容器 - extJS
javascript - 是否有 Dojo XPATH 对象？
html - 当我在 Expo (iOS) 中使用 Print API 打印 html 时，html 中的分页符无法按预期工作