今天遇到一個問題，客戶說頁面來回跳轉太麻煩了，需要把相似的頁面做到一個頁面上去。
接下來說一下記錄一下解決方法。
首先這是三個頁面中相似的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>