Jquery 上一步、下一步及提交

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()">提&nbsp;&nbsp;交</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>

 

posted @ 2019-06-11 21:55  一只桔子2233  阅读(837)  评论(0)  编辑  收藏  举报