今天遇到一个问题，客户说页面来回跳转太麻烦了，需要把相似的页面做到一个页面上去。
接下来说一下记录一下解决方法。
首先这是三个页面中相似的Div：
<div class="wenti">
<p class="question">问题1</p><span style="float:left"><img src="images/mag.png" width="50" id="mag"/></span>
<p class="answera">答案1</p>
<p class="answerb">答案1——1</p>
</div>
<div class="back">
<a href="#" id="backl" style="display:none;"><img src="images/c01.png"/></a>
</div>
接下来这个一个是返回上一页，一个是进入下一页按钮
<div class="bottom">
<a href="#" id="p6"><img src="images/b03.png" /></a>
<a href="#" id="p8"><img src="images/b04.png" /></a>
</div>
下面贴上js代码：
<script type="text/javascript">
/*控制点击放大镜(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>