html通过ajax load（）连续加载html（无JSON）

Question

我的概念是将html文件从一个加载到另一个。下面的图片可以解释得更好。例如，我有no1.html, no2.html,no3.html, no4.html ...并且他们共享一个JavaScript文件，所有html文件都有自己的内容。

第一个HTML文件no1.html加载no2.html，我的javascript是no1.html喜欢，$('#element').load('no2.html #content');然后no2.html js就像$('#element').load('no3.html #content');

如果所有文件只共享一个javascript文件无法连续加载html页面，有没有办法让html连续加载另一个html？

Answer 1

我想你想做的是这样的事情：

<强> my.js

$(function() {

      // delegate click event to ajax content
      $("body").on("click",".load_button",function() { 

        $(this).hide(); // hide this button
        var area_name = $(this).data("area");
        var next_file = $(this).data("next");
        $("#"+area_name).load(next_file);
    });
});

<强> no1.html

<script src="my.js"></script>

This is No.1
.....
<div id="area_2">no2 will be here</div>
<div class="load_button" data-area="area_2" data-next="no2.html">Click</div>

<强> no2.html

This is No.2
.....
<div id="area_3">no3 will be here</div>
<div class="load_button" data-area="area_3" data-next="no3.html">Click</div>

<强> no3.html

This is No.3
.....
<div id="area_4">no4 will be here</div>
<div class="load_button" data-area="area_4" data-next="no4.html">Click</div>

在此示例中，my.js仅在no1.html中包含{{1}}一次。
希望这会有所帮助。