如何将HTML5页面加载到HTML5页面？

Question

我在HTML5中制作一个简单的静态应用程序.

我现在正在做的是我有一个长页面,其中有数千行代码.

我目前正在这样做去另一页:

<div data-role="content">
    <label for="heading">History</label>
    <a href="#module_a" data-role="button" data-icon="arrow-r" data-iconpos="right" data-transition="flip">History</a>
    <a href="module_b" data-role="button" data-icon="arrow-r" data-iconpos="right">Remote Control</a>
</div>

...然后我有module_a和module_b如下......

<div id="module_a" data-role="page">
    //content
</div>

...和module_b相同

两个div都在同一页面,所以我的页面看起来很糟糕.

我想要的是我需要相同的功能,但我不希望我的div在同一页面中是module_a和module_b.

我想为它创建不同的页面然后加载它,因为我的主页看起来很清楚.

Answer 1

如果我收集你正确要求的东西你想要AJAX.当您单击其中一个链接/按钮时,您需要一个javascript代码,该代码将发送请求以获取另一个页面的HTML并将其加载到页面上.

执行此操作的最佳方法是使用jQuery.它有一个非常有用的功能load(),它可以完全满足您的需求.http://api.jquery.com/load/

它看起来像这样:

$('#containerWhereYouWantTheContentToLoad').load('http://url.to/content/you/want/to/load.html');

希望有所帮助.