其實就是同樣的程式碼但我多加了幾行註解。
<!DOCTYPE html>
<html>
<head>
<title>AJAX GoBack</title>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ba-bbq/1.2.1/jquery.ba-bbq.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#s1").show();
$("input.nav-btn").click(function() {
var $btn = $(this); //this為目前被點擊的btn物件
$btn.parent().hide(); //當點擊按鈕後，就把自己隱藏。如：點擊STEP1的按鈕，就把自己的父類別div隱藏
var nav = $btn.data("nav"); //取得現在這個按鈕的data-nav屬性的值，第一次點擊就取得s2，$btn.data("nav")就是印出s2
$("#" + nav).show(); //顯示下一個div
//將目前的步驟加註在location.hash
$.bbq.pushState({
step: nav
}); //pushState裡面的東西就是key：value形式
});
//hash變化時觸發hashchange事件
$(window).bind('hashchange', function(e) { //控制上一頁的動作
//由hash取出step參數，決定要顯示哪一個div
var s = e.getState("step") || "s1"; //e.getState("step")回傳s2 or s3
//if (!$("#" + s + ":visible").length) {
$("#main > div").hide();
$("#" + s).show();
//}
});
});
</script>
<style>
#main div {
width: 300px;
height: 200px;
display: none;
padding: 10px;
}
#s1 {
background-color: #ff7777;
}
#s2 {
background-color: #77ff77;
}
#s3 {
background-color: #7777ff;
}
</style>
</head>
<body>
<div id="main">
<div id="s1">
STEP1
<input type="button" class="nav-btn" value="Next" data-nav="s2" />
</div>
<div id="s2">
STEP2
<input type="button" class="nav-btn" value="Next" data-nav="s3" />
</div>
<div id="s3">
FINAL
<input type="button" value="Submit" />
</div>
</div>
</body>
</html>
參考：http://bit.ly/2lJqANm
沒有留言:
張貼留言