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. where 1=1影响效率以及having和where的区别

    低效的“WHERE 1=1” 网上有不少人提出过类似的问题:“看到有人写了WHERE 1=1这样的SQL,到底是什么意 思?”. 其实使用这种用法的开发人员一般都是在使用动态组装的SQL. 让我们想像 ...

  2. data-toggle data-target

    data-toggle https://stackoverflow.com/questions/30629974/how-does-the-data-toggle-attribute-work-wha ...

  3. Oracle 游标使用总结（好文章）

    游标(CURSOR)也叫光标,在关系数据库中经常使用,在PL/SQL程序中可以用CURSOR与SELECT一起对表或者视图中的数据进行查询并逐行读取. Oracle游标分为显示游标和隐式游标. 显示游 ...

  4. POJ2686 Traveling by Stagecoach 状态压缩DP

    POJ2686 比较简单的 状态压缩DP 注意DP方程转移时,新的状态必然数值上小于当前状态,故最外层循环为状态从大到小即可. #include <cstdio> #include < ...

  5. RDA 重现率

    文件目录: timing_info/AspectRatioOverscan&TimingTool/Aspect_Ratio_Overscan&Timing_Tool_330.xls 重 ...

  6. MySQL：目录

    ylbtech-MySQL:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech ...

  7. 转贴：获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  8. 清北考前刷题day6下午好

    /* 贪心 负数一定不取 枚举最高位是1 且答案取为0的 位置, 更新答案. */ #include<iostream> #include<cstdio> #include&l ...

  9. 在sql语句中使用关键字

    背景 开发过程中遇到了遇到了一句sql语句一直报错,看了一下字段名和表名都对应上了,但是还是一直报错 sql语句如下: update table set using = ""hh ...

  10. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...