111
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>上一步、下一步、提交</title> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> </head> <body> <div id="box"> <div id="sessionData" class="showOrHidden"> <h1>sessionData</h1> </div> <div id="presidiumData" class="showOrHidden" hidden> <h1>presidiumData</h1> </div> <div id="hostsData" class="showOrHidden" hidden> <h1>hostsData</h1> </div> <div class="mui-button-row"> <button id="lastStep" style="display:none" class="mui-btn mui-btn-primary" type="button" onclick="lastStepFunc('#box');">上一步</button> <button id="nextStep" class="mui-btn mui-btn-primary" type="button" onclick="nextStep('#box');">下一步</button> <button id="submit" style="display:none" class="mui-btn mui-btn-primary" type="button" onclick="postFunc()">提 交</button> </div> </div> <script> var currentPage = 1; function lastStepFunc(id) { if (currentPage > 1) currentPage--; currentPageFunc(currentPage); var divLen = $(id).find(".showOrHidden").length; var Thisdiv = 0; for (var i = 0; i < divLen; i++) { if ($(id).find(".showOrHidden").eq(i).css("display") != "none") { Thisdiv = i; }; }; if (Thisdiv != 0) { $(id).find(".showOrHidden").hide().eq(Thisdiv - 1).show(); }; } function nextStep(id) { if (currentPage < 3) currentPage++; currentPageFunc(currentPage); var divLen = $(id).find(".showOrHidden").length; var Thisdiv = 0; for (var i = 0; i < divLen; i++) { if ($(id).find(".showOrHidden").eq(i).css("display") != "none") { Thisdiv = i; }; }; if (Thisdiv < divLen - 1) { $(id).find(".showOrHidden").hide().eq(Thisdiv + 1).show(); }; } function currentPageFunc(currentPage) { if (currentPage == 1) { $("#lastStep").hide(); $("#nextStep").show(); $("#submit").hide(); } else if (currentPage == 2) { $("#lastStep").show(); $("#nextStep").show(); $("#submit").hide(); } else if (currentPage == 3) { $("#lastStep").show(); $("#nextStep").hide(); $("#submit").show(); } } function postFunc() { alert("点击了提交"); } </script> </body> </html>