2

我正在用 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 在同一页面中。

我想为此创建不同的页面，然后加载它，以便我的主页看起来清晰。

4

3 回答 3

6

如果我收集到您正确询问的内容，那么您需要 AJAX。当您单击其中一个链接/按钮时，您需要一个 javascript 代码，该代码将发送请求以获取另一个页面的 HTML 并将其加载到页面上的适当位置。

最好的方法是使用 jQuery。它有一个非常有用的功能load()，它可以完全满足您的需求。http://api.jquery.com/load/

它看起来像这样：

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

希望有帮助。

于 2012-06-29T08:25:14.283 回答
1

这应该有效：

  1. 将每个模块放在它们自己的文件中。
  2. 修改模块的链接，使它们链接到模块文件。
  3. <iframe>用标签替换原始文件中的模块。
  4. 将onclick事件处理程序添加到将 的src属性设置<iframe>为模块文件的 URL 的每个链接（并返回false，以便不跟随链接）。

但是，如果您按照@ThomasClayson 的建议使用 AJAX，那么您就有更多的空间来处理加载的 HTML 。

于 2012-06-29T08:25:18.987 回答
0

你试过AJAX吗？

 $.ajax({
   url: 'seperate_page.html',
   success: function(data) {
     $('#module_b').html(data);
   }
 });

根据我对问题的理解，这将解决您的问题..希望对您有所帮助

于 2012-06-29T08:29:47.983 回答