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. 第一个GraphX程序

    程序功能:收集顶点指向的邻居中所在地 /* * 找出每一个顶点所指向的邻居中所在的地区 */ import org.apache.spark.SparkContext import org.apach ...

  2. Codeforces Round #396 (Div. 2) E. Mahmoud and a xor trip 树形压位DP

      题目链接:http://codeforces.com/contest/766/problem/E Examples input 3 1 2 3 1 2 2 3 out 10 题意: 给你一棵n个点 ...

  3. Binary safe

    https://en.wikipedia.org/wiki/Binary-safe A binary-safe function is one that treats its input as a r ...

  4. ios33--线程安全

    // // ViewController.m // 05-掌握-线程安全 // // 多线程下载文件:每个线程下的部分可能是交错的,到时候就拼接不了.除非每个线程下载的不是交错的,而是从头到尾依次分开 ...

  5. bzoj4873

    http://www.lydsy.com/JudgeOnline/problem.php?id=4873 最大权闭合子图... 建图: 1.d[i][j]:i->j区间的费用,d[i][j] & ...

  6. js DOM操作练习

    1.有如下html,如果用js获得被选中的option的text描述(非value)<select id="select_id">    <option vlue ...

  7. 【转】20道Spring Boot面试题

    面试了少量人,简历上都说自己熟习 Spring Boot, 或者者说正在学习 Spring Boot,一问他们时,都只停留在简单的使用阶段,很多东西都不清楚,也让我对面试者大失所望. 下面,我给大家总 ...

  8. MySql数据库创建表

    3.3.MySql数据库创建表 创建5个表: UserInfo用户基础表 Role 角色表 MenuInfo 菜单即控制表 Relation_Role_Menu 角色对应菜单关系表 RelaTion_ ...

  9. LOJ#510. 「LibreOJ NOI Round #1」北校门外的回忆（线段树）

    题面 传送门 题解 感谢\(@M\_sea\)的代码我总算看懂题解了-- 这个操作的本质就是每次把\(x\)的\(k\)进制最低位乘\(2\)并进位,根据基本同余芝士如果\(k\)是奇数那么最低位永远 ...

  10. KMP POJ 2406 Power Strings

    题目传送门 /* 题意:一个串有字串重复n次产生,求最大的n KMP:nex[]的性质应用,感觉对nex加深了理解 */ /************************************** ...