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>

Jquery 上一步、下一步及提交的更多相关文章

  1. OAF 交互式列车 上一步 下一步的简单使用

    在实际的需求中,我们往往会遇到在下一步的时候验证某些参数,而上一步不需要验证. 这个是非常粗暴的解决方式 if( "goto".equals(pageContext.getPara ...

  2. js 上一步 下一步 操作

    <a id="syb" href="#" style="display: block;" class="btn button ...

  3. 上一步是硬件描述语言，下一步是FPGA

    上一步是硬件描述语言,下一步是FPGA. 学习了硬件描述语言(Verilog或者VHDL)之后,FPGA该如何继续. 世上没有捷径,每一步都得踏踏实实的走.学习FPGA也是这样,在有了硬件描述语言的基 ...

  4. 在开发中进入一个方法后想要到原来那行 ctrl+alt+左 回到上一步 ctrl+alt+右 回到下一步

    在开发中进入一个方法后想要到原来那行 ctrl+alt+左 回到上一步ctrl+alt+右 回到下一步

  5. IDEA - 返回上一步，回到下一步 代码 快捷键

    回到上一步 ctrl + alt + < 回到下一步 ctrl + alt + >

  6. jquery.form.js实现将form提交转为ajax方式提交的使用方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  7. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  8. jquery.form.js实现将form提交转为ajax方式提交的方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  9. jQuery上定义插件并重设插件构造函数

    插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ========= ...

随机推荐

  1. HDU 5416

    CRB and Tree                                       Time Limit: 8000/4000 MS (Java/Others)    Memory ...

  2. js验证手机号，身份证，车牌号验证

    js验证手机号  <input type="text" class="identificationno"> // 身份证号码为15位或者18位,15 ...

  3. [Jsoi2015]字符串树

    https://www.zybuluo.com/ysner/note/1298148 题面 字符串树本质上还是一棵树,即\(N\)个节点\(N-1\)条边的连通无向无环图,节点 从\(1\)到\(N\ ...

  4. python调用java程序--jpype

    官方网站:http://jpype.sourceforge.net/ 官方使用文档:http://jpype.sourceforge.net/doc/user-guide/userguide.html ...

  5. TI BLE STACK - OSAL

    TI 的OSAL做的很不错,不过看起来也挺费劲可能自己水平太差吧,网上买的谷雨的开发板觉得确实挺不错的. 做点学习笔记,首先是记录OSAL里执行的顺序流程,主要是task ,event,message ...

  6. PCB Genesis拼SET画工艺边 实现方法（一）

    在PCB行业中,客户提供的PCB尺寸较小,为方便PCB加工,并生产提高生产效率,通常小于80X80mm需拼板处理的, 拼板要求可能来自按户指定拼板,也有可能是由工厂自行拼板,但对于CAM来说就需将PC ...

  7. AutoCAD C# 利用反射导出所注册的命令

    主函数导出某一程序集AutoCAD 注册命令 /// <summary> ///提取所有的命令 /// </summary> /// <param name=" ...

  8. Linux下安装网络软件的步骤

    Linux下安装网络软件的步骤(给linux初学者,linux大神请绕路) 首先下载你所需要的软件带有deb后缀的文件 然后切换到该文件的目录 切换到超级用户权限或者是(sudo) 使用sudo dp ...

  9. 二分搜索 Codeforces Round #218 (Div. 2) C. Hamburgers

    题目传送门 /* 题意:一个汉堡制作由字符串得出,自己有一些原材料,还有钱可以去商店购买原材料,问最多能做几个汉堡 二分:二分汉堡个数,判断此时所花费的钱是否在规定以内 */ #include < ...

  10. ACM_括号匹配

    括号匹配(栈) Time Limit: 2000/1000ms (Java/Others) Problem Description: 给一组包含[]()两种括号的序列,检查是否是合法的. 如:()[] ...