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. 动态JSP的了解

    一.JSP与HTML的根本区别 1..JSP(Java Server Page)页面是动态页,JSP页面是有JSP容器执行该页面的Java代码部分然后实时生成的HTML页面,因而说是动态页面.2..H ...

  2. 安装 matplotlib

    比较推荐还是用pip来安装,用源码安装还是会比较麻烦,进入到CMD窗口下,执行python -m pip install -U pip setuptools进行升级. 接着键入python -m pi ...

  3. Centos7 防火墙firewalld配置

    开启80端口 firewall-cmd --zone=public --add-port=80/tcp --permanent  出现success表明添加成功 移除某个端口 firewall-cmd ...

  4. 【NOIP1999】【Codevs 1046】旅行家的预算

    http://codevs.cn/problem/1046/ Solution: 贪心,如果当前油价很低,它就比起当前剩余油的价还低就可以替换,并且每次加满,最后把剩的油卖掉即可 油价用单调链表(不知 ...

  5. iOS组件化开发入门 —— 提交自己的私有库

    前言:本人也是初次接触组件化开发,感觉现有的资料太繁杂,就简单整理了一下,在此跟大家分享一些入手的经验,主要就是描述cocoapods的私有库封装和提交.组件化开发是个大的议题,涉及到架构思路.设计模 ...

  6. E20180124-hm

    introspection n.自我反省; 反省,内省; capacity n. 容量; 性能; 才能; 生产能力; synthesize vt. 综合; 人工合成; (通过化学手段或生物过程) 合成 ...

  7. 为什么Markdown能夺得程序员的青睐

    Markdown基本情况概述 Markdown是在HTML的基础上产生的.HTML的功能已经足够强大,可以编写出漂亮的网页.HTML在没有CSS的加持上,尽管不能显示出绚丽多彩的网页,但是仍然可以达到 ...

  8. Java实现短信中提取号码

    Description 提取一条短信里所有的电话号码,电话号码之间换行打印,短信的内容由用户输入. Input 第一行有个整数n(1≤n≤1000)表示测试用例的个数.其后的每一行中有一条短信,每一条 ...

  9. 【第三届强网杯】write up

    一,鲲or鳗orGame 从浏览器里拿到game.gb 用 VisualBoyAdvance ,搜索内存变量,然后改变量就完事了,但是改变量他们说直接利用添加代码功能有bug,所以要在工具里的内存查看 ...

  10. moiezen

    这题是个随机化+二分裸题--------考场上居然没有想出来--想的出来就怪了吧 我们随机一下增加x的顺序,然后进行二分之前,看看这个x加完之后能不能更新答案,不能就不二分了.具题解所说,这个复杂度是 ...