如何在不刷新的情况下使此脚本转到新页面。我应该在javascript中试试吗？还是有一种更简单的方法？我尝试使用next / prev按钮，但我不能这样做，至少在我自己身上。在这里我放了代码，我会告诉你我尝试了什么
如果用java无法完成，我还能做些什么，至少给人一种不刷新/改变页面的印象。
<section id="wrap">
<div class="wrapper">
<div class="inner">
<section class="features">
<div class=page1">
<article>
<a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
<article>
<a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
<section class="features">
<article>
<a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
<article>
<a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
</div>
<div class=page2">
<article>
<a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
<article>
<a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
<section class="features">
<article>
<a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
<article>
<a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
<a href="#" class="special">Click pentru a viziona.</a>
</article>
</div>
<ul class="pagination">
<li><span class="button small disabled">Prev</span></li>
<li><a href="#" class="page active">1</a></li>
<li><a href="#2" class="page">2</a></li>
<li><a href="#" class="page">3</a></li>
<li><span>…</span></li>
<li><a href="#" class="page">8</a></li>
<li><a href="#" class="page">9</a></li>
<li><a href="#" class="page">10</a></li>
<li><a href="#" class="button small">Next</a></li>
</ul>
</section>
</div>
</div>
</section>
我尝试了什么
<script>
$(document).ready(function(){
var pages = $('#container li'), current=0;
var currentPage,nextPage;
$('#container .button').click(function(){
currentPage= pages.eq(current);
if($(this).hasClass('prevButton'))
{
if (current <= 0)
current=pages.length-1;
else
current=current-1;
}
else
{
if (current >= pages.length-1)
current=0;
else
current=current+1;
}
nextPage = pages.eq(current);
pages.hide();
nextPage.show();
}).filter('.nextButton').click();
});
</script>
答案 0 :(得分：0)
无需加载它们就无法显示新页面。 但是你想要做的事情是可能的。 您只需要在当前DOM中添加所需页面的HTML内容和CSS。然后使用一些CSS规则和javascript，为您的DOM制作动画。
这可以在您点击下一个按钮时动态完成（然后在加载下一页内容时显示活动指示符）
或者当您第一次加载初始页面时。在这种情况下，您的下一页的HTML将被隐藏，并且在按下＆＃34; next＆＃34;时，您将无法获得任何加载时间。
我会推荐第一种方法，因为在第二种情况下你的代码会变得非常混乱。
在你的DOM中，你会有类似的东西：
<div class="myFirstPageClass">
your content of your first page
</div>
<div class="mySecondPageClass">
your second page
</div>
在你的js中，如果你使用jQuery，当你点击下一个时就会有类似的东西：
$('.myFirstPageClass').hide();
$('.mySecondPageClass').show();
但是，正如BShaps所解释的那样，你绝对应该使用一个框架。它们将帮助您构建代码。
答案 1 :(得分：0)
基本上，听起来你正在询问如何使用vanilla javascript构建SPA（单页应用程序）。我不是真的推荐它，因为它很痛苦所以我建议使用一个框架，使创建SPA更容易。
但是，如果你真的想尝试使用vanilla js，那么这里有一个显示如何操作的链接：TraversableWithIndex