用jquery将多个页面中相似页面显示到一个页面并实现来回跳转

今天遇到一个问题，客户说页面来回跳转太麻烦了，需要把相似的页面做到一个页面上去。

接下来说一下记录一下解决方法。

首先这是三个页面中相似的Div：

</div>

</div>

接下来这个一个是返回上一页，一个是进入下一页按钮

下面贴上js代码：

/*控制点击放大镜(id为#mag)的图片显示答案，然后点击返回按钮(id为#backl)隐藏答案*/

$("#mag").click(function(){
$(".answera").show();
$(".answerb").show();
$("#mag").hide();
$("#backr").hide();
$("#backl").show();
});
$("#backl").click(function(){
$("#mag").show();
$("#backl").hide();
$("#backr").show();
$(".answera").hide();
$(".answerb").hide();
});

/*定义点击次数变量*/

var dianji = 1;
$("#p8").click(function(){

if(dianji == 1)

/*点击了下一页的按钮，然后显示第二页的内容*/
{
$(".question").text("第二页的问题");
$(".answera").text("第二页的问题答案1");
$(".answerb").text("第二页的问题答案1_1");

$(".answerb").append("<p class='answerb'>第二页的问题答案1_2</p>");
$("#mag").show();
$("#backl").hide();
$("#backr").show();
$(".answera").hide();
$(".answerb").hide();

}else if(dianji == 2)

{

/*dianji = 2,说明点击了第二次下一页的按钮，此时跳转到第三页的内容*/
$(".question").text("第三页的问题");
$(".answera").text("第三页的答案");
$(".answerb").text("");//由于第三页没有第二页的答案B内容，所以清空
$("#mag").show();
$("#backl").hide();
$("#backr").show();
$(".answera").hide();
$(".answerb").hide();

}else if(dianji >= 3){

/*如果是第三次点击下一页的按钮，那么跳出本页，跳转到下一个新的页面*/
window.location.href='pagenext.html';
}

dianji++;

});

/*下面做的是点击上一页的按钮，实现跳转到上一个相似页面的内容，和上面的思路相似，就不一一讲解了*/
$("#p6").click(function(){
dianji--;
if(dianji == 2)
{
$(".question").text("第二页的问题");
$(".answera").text("第二页的答案1");
$(".answerb").text("第二页的答案1_1");

$(".answerb").append("<p class='answerb'>第二页的答案1_2</p>");
$("#mag").show();
$("#backl").hide();
$("#backr").show();
$(".answera").hide();
$(".answerb").hide();

}else if(dianji == 1)
{
$(".question").text("第一页的问题");

$(".answera").text("第一页的答案1");
$(".answerb").text("第一页的答案1_1");
$("#mag").show();
$("#backl").hide();
$("#backr").show();
$(".answera").hide();
$(".answerb").hide();

}else if(dianji <= 0){
window.location.href='pagelast.html';
}

});

</script>

用jquery将多个页面中相似页面显示到一个页面并实现来回跳转

相关推荐