Question

我希望你能帮我解决问题。

从根本上说，我有一个'主'div，有两个箭头般的图像。点击图片，我必须能够用另一个.html页面的'main'div的内容替换'main'div的内容，创建你正在浏览页面的'幻觉'。

这是我的 .html 和 .js 代码：

HTML

PAGE1

<div id="main">

<div id="noMainVarOnLoad">
<!-- CONTENT OF THE DIV -->
<img src="img/scroll_right.png" class="scroll_page_buttons" id="scroll_page_right" data-nextpage="page2.html">
</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="application/javascript"></script> 
<script>window.jQuery || document.write('<script src="js/jquery-3.0.0.min.js" type="application/javascript"><\/script>')</script> 

<script type="application/javascript" src="etheric_injection.js"></script>

PAGE2

<div id="main">

<div id="noMainVarOnLoad">
<!-- CONTENT OF THE DIV -->
<img src="img/scroll_right.png" class="scroll_page_buttons" id="scroll_page_right" data-nextpage="page3.html">
<img src="img/scroll_left.png" class="scroll_page_buttons" id="scroll_page_left" data-previouspage="page1.html">
</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="application/javascript"></script> 
<script>window.jQuery || document.write('<script src="js/jquery-3.0.0.min.js" type="application/javascript"><\/script>')</script> 

<script type="application/javascript" src="etheric_injection.js"></script>

PAGE_3

<div id="main">

<div id="noMainVarOnLoad">
<!-- CONTENT OF THE DIV -->
<img src="img/scroll_left.png" class="scroll_page_buttons" id="scroll_page_left" style="border: 1px solid blue" data-previouspage="page2.html">  

</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="application/javascript"></script> 
<script>window.jQuery || document.write('<script src="js/jquery-3.0.0.min.js" type="application/javascript"><\/script>')</script> 

<script type="application/javascript" src="etheric_injection.js"></script>

JAVASCRIPT

var $j=jQuery.noConflict();

$j("#scroll_page_right").on("click",function(e){
var getData=$j("#scroll_page_right").data("nextpage");

$j("#noMainVarOnLoad").load(getData+" #noMainVarOnLoad");
e.preventDefault(); 

});

$j("#scroll_page_left").on("click",function(e){
var getData=$j("#scroll_page_left").data("previouspage");

$j("#noMainVarOnLoad").load(getData+" #noMainVarOnLoad");
e.preventDefault(); 

});

那么，问题是什么？让我们考虑一下我在 page2.html 上的情况。单击图像，我成功地用page1.html的'main'div的内容替换了page2.html的'main'div的内容。

所以，现在我在我的page2.html上，并将page2的'main'内容替换为page1.html的内容（正如您从代码中看到的那样，page1.html的'main'div，与page2.html不同，仅限于右箭头图像。

之后，如果我现在重新点击右箭头图像来替换实际内容 - 这是page1.html的内容 - 与page2.html的内容，没有任何反应。

我花了几天时间试图找出问题所在，但我找不到解决方案。

使用.load（）翻阅页面

0 个答案: