111

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>上一步、下一步、提交</title>
  6.     <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="box">
  10.         <div id="sessionData" class="showOrHidden">
  11.             <h1>sessionData</h1>
  12.         </div>
  13.  
  14.         <div id="presidiumData" class="showOrHidden" hidden>
  15.             <h1>presidiumData</h1>
  16.         </div>
  17.  
  18.         <div id="hostsData" class="showOrHidden" hidden>
  19.             <h1>hostsData</h1>
  20.         </div>
  21.  
  22.         <div class="mui-button-row">
  23.             <button id="lastStep" style="display:none" class="mui-btn mui-btn-primary" type="button" onclick="lastStepFunc('#box');">上一步</button>
  24.             <button id="nextStep" class="mui-btn mui-btn-primary" type="button" onclick="nextStep('#box');">下一步</button>
  25.             <button id="submit" style="display:none" class="mui-btn mui-btn-primary" type="button" onclick="postFunc()">提&nbsp;&nbsp;交</button>
  26.         </div>
  27.  
  28.     </div>
  29.  
  30.     <script>
  31.         var currentPage = 1;
  32.         function lastStepFunc(id) {
  33.             if (currentPage > 1)
  34.                 currentPage--;
  35.             currentPageFunc(currentPage);
  36.             var divLen = $(id).find(".showOrHidden").length;
  37.             var Thisdiv = 0;
  38.             for (var i = 0; i < divLen; i++) { if ($(id).find(".showOrHidden").eq(i).css("display") != "none") { Thisdiv = i; }; };
  39.             if (Thisdiv != 0) { $(id).find(".showOrHidden").hide().eq(Thisdiv - 1).show(); };
  40.         }
  41.         function nextStep(id) {
  42.             if (currentPage < 3)
  43.                 currentPage++;
  44.             currentPageFunc(currentPage);
  45.             var divLen = $(id).find(".showOrHidden").length;
  46.             var Thisdiv = 0;
  47.             for (var i = 0; i < divLen; i++) { if ($(id).find(".showOrHidden").eq(i).css("display") != "none") { Thisdiv = i; }; };
  48.             if (Thisdiv < divLen - 1) { $(id).find(".showOrHidden").hide().eq(Thisdiv + 1).show(); };
  49.         }
  50.         function currentPageFunc(currentPage) {
  51.             if (currentPage == 1) {
  52.                 $("#lastStep").hide();
  53.                 $("#nextStep").show();
  54.                 $("#submit").hide();
  55.             } else if (currentPage == 2) {
  56.                 $("#lastStep").show();
  57.                 $("#nextStep").show();
  58.                 $("#submit").hide();
  59.             }
  60.             else if (currentPage == 3) {
  61.                 $("#lastStep").show();
  62.                 $("#nextStep").hide();
  63.                 $("#submit").show();
  64.             }
  65.         }
  66.         function postFunc() {
  67.             alert("点击了提交");
  68.         }
  69.     </script>
  70. </body>
  71. </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. web 开发之js---js 实现网页中播放wav的一种方法（flash播放器）

    http://blog.csdn.net/whumr1/article/details/6948160

  2. ASP.NET调用存储过程并接收存储过程返回值

    ASP.NET调用存储过程并接收存储过程返回值 2010-08-02 11:26:17|  分类: C#|字号 订阅       2010年02月27日 星期六 23:52 假设表结构Create T ...

  3. POJ1264 SCUD Busters 凸包

    POJ1264 有m个国家(m<=20)对每个国家给定n个城镇 这个国家的围墙是保证围住n个城镇的周长最短的多边形 必然是凸包 进行若干次导弹发射 落到一个国家内则国家被破坏 最后回答总共有多少 ...

  4. android 手机上运行图像算法

    在pc上调试好的图像处理算法想要在android手机上跑一下看看速度需要一下几个步骤 1.建立一个android application,通过ndk调用你写好的图像算法的c/c++ code 2. 然 ...

  5. 使用Google的Closure Compiler，在本机上压缩javascript

    2011-12-05 13:47:39   1.JAVA JDK下载地址: http://download.oracle.com/otn-pub/java/jdk/7u1-b08/jdk-7u1-wi ...

  6. ubuntu 14.04中： 像ubuntu16.04 一样可以在文件夹内打开此路径下的shell

    sudo apt-get install nautilus-open-terminal 然后重启 ok!

  7. 使用WinSXS进行系统盘瘦身Windows 7/2008/10/2012不断变大的C盘（Windows 更新清理）

    这是一款非常给力的国产良心小工具,用阿里云ECS的时候,一个C盘没多久就被坑爹的微软更新沉余文件塞满.此工具简单好用一下搞定! 操作系统: 所有 NT 6.X 内核的操作系统.比如 Windows V ...

  8. Builder Design pattern

    string assemblyName = ConfigurationSettings["BuilderAssembly"]; string builderName = Confi ...

  9. 【weiphp】安装中报错

    问题描述:安装的第三部报错“SQLSTATE[HY000]: General error: 2030 This command is not supported in the prepared sta ...

  10. mvn 配置

    <!-- 阿里云仓库1 -->    <mirror>        <id>alimaven-1</id>        <name>al ...