首页 新闻 赞助 找找看

HTML中有一个下一步按钮,怎么让他每次点击下一步的时候进去不同的页面?

0
[已解决问题] 解决于 2017-03-29 09:38

HTML中有一个下一页按钮,就跟安装客户端一样要下一页下一页,但他只给了按钮,就是说第一次点下一页,页面中内容改变,第二次点下一页,页面又变成另一个?

<input id="radLeadingIn" name="radOperation" type="radio" value="导入" checked="checked" />
<input id="radLeadingOut" name="radOperation" type="radio" value="导出" />
<div id="div1">导入</div>
<div id="div2">导出</div>
<div id="div3">导入完成</div>
<div id="div4">导出完成</div>
<button id="btnNextStep" class="btn btnblack" type="button">下一步</button>
复制代码
$("#btnNextStep").click(function () {    
            //如果是导入被选中
            if ($("#radLeadingIn").attr("checked")) {
                 1.隐藏那两个单选按钮
                 2.显示div1             
            }
            //如果是导出被选中
            if ($("#radLeadingOut").attr("checked")) {
                 1.隐藏那两个单选按钮
                 2.显示div2 
            }
        }
    });
复制代码

做到这一步后就是还要点击下一页,如果是一开始选中的是导入就显div3,如果是导出就显示div4

就是一个“下一步”按钮一共实现三个页面的跳转

我只会处理第一次的跳转,第二次的跳转就不知道怎么写了

哎,有点复杂,不知道这样描述你们懂不懂。

你猜丶的主页 你猜丶 | 初学一级 | 园豆:183
提问于:2017-03-28 17:02
< >
分享
最佳答案
0

兄弟谢谢,你们回答的都很好,不过我想到了一个更好的方法,可以重复多个多个页面的

    //记录点击下一步次数
    var index = 0;
    $("#btnNextStep").click(function() {
        if (index == 0) {
            if ($("#radLeadingIn").attr("checked")) {
                //1.隐藏那两个单选按钮
                $("#radLeadingIn").hide();
                //2.显示div1   
                $("#div1").show();
                 index=2;
             }
if ($("#radLeadingOut").attr("checked")) { //1.隐藏那两个单选按钮 //2.显示div2 index=3; } }else if(index==2) { $("#div1").hide(); $("#div3").show(); } else if(index==3) { $("#div2").hide(); $("#div4").show();
} });

 

你猜丶 | 初学一级 |园豆:183 | 2017-03-29 09:34
其他回答(4)
0

给个全局变量。。。。。。。

var clkTime = 0;
$("#btnNextStep").click(function () { 
            //如果是导入被选中
            if ($("#radLeadingIn").attr("checked")) {
                 1.隐藏那两个单选按钮
                 2.显示div1  
               $(“#div”+(clkTime + 1))...
            }
            //如果是导出被选中
            if ($("#radLeadingOut").attr("checked")) {
                 1.隐藏那两个单选按钮
                 2.显示div2 
                $(“#div”+(clkTime +2))...
            }

            clkTime+=2; 

        }
    });

有点傻,但任你多少个下一步都能解决,哈哈~,~

codingHeart | 园豆:1511 (小虾三级) | 2017-03-28 17:37

不能这样啊,第一次点“下一步”只能出现一个div,第二次点“下一步”的时候才能出现最后一个div

支持(0) 反对(0) 你猜丶 | 园豆:183 (初学一级) | 2017-03-28 17:50

@你猜丶: 我来理一下:

  1. 第一次显示页面只有两个radio,点击下一页根据所选radio呈现页面(div1或者div2)
  2. 继续点击下一页,根据 1 中当时所选的radio呈现页面(div3或者div4)

请问是这样么?

支持(0) 反对(0) codingHeart | 园豆:1511 (小虾三级) | 2017-03-29 08:48

@你猜丶: 

还是这段代码,加一个else可好:

var clkTime = 0;
$("#btnNextStep").click(function () { 
            //如果是导入被选中
            if ($("#radLeadingIn").attr("checked")) {
                 1.隐藏那两个单选按钮
                 2.显示div1或者div3 (第一次点击clkTime 为0,即div1;第二次点击clkTime 为2,即div3) 
               $(“#div”+(clkTime + 1))...
            }
            //如果是导出被选中
          else  if ($("#radLeadingOut").attr("checked")) {
                 1.隐藏那两个单选按钮
                 2.显示div2 或者div4
                $(“#div”+(clkTime +2))...
            }

            clkTime+=2; 

        }
    });
支持(0) 反对(0) codingHeart | 园豆:1511 (小虾三级) | 2017-03-29 08:51
0

没看懂你要做成什么效果

小子贪欢 | 园豆:208 (菜鸟二级) | 2017-03-28 17:49

就是平时安装QQ客服端啊,不是要点击下一步下一步完成吗?他每次点击下一步都能进去不同的页面,这个也是一样,我要进去第三个下一页的时候不知道怎么处理判断了。

就是一个“下一步”按钮一共实现三个页面的跳转

我只会处理第一次的跳转,第二次的跳转就不知道怎么写了

支持(0) 反对(0) 你猜丶 | 园豆:183 (初学一级) | 2017-03-28 17:51
0
    //记录被选中的Radio
    var radioValue = '';
    //记录点击下一步次数
    var index = 0;
    $("#btnNextStep").click(function() {
        if (index = 0) {
            radioValue = $("input[type='radio']:checked").val();
            if (radioValue == '导入') {
                //1.隐藏那两个单选按钮
                $("input[type='radio']").hide();
                //2.显示div1   
                $("#div1").show();
            } else {
                //1.隐藏那两个单选按钮
                $("input[type='radio']").hide();
                //2.显示div2   
                $("#div2").show();
            }
        } else {
            if (radioValue == '导入') {
                $("#div1").hide();
                $("#div3").show();
            } else {
                $("#div2").hide();
                $("#div4").show();
            }
        }
        index++;
    });
liuxb1991 | 园豆:661 (小虾三级) | 2017-03-28 22:13

兄弟,你这个这一句无法获取到值

radioValue = $("input[type='radio']:checked").val();

if (radioValue == '导入'){}

支持(0) 反对(0) 你猜丶 | 园豆:183 (初学一级) | 2017-03-29 09:38
0

1、如果前后有关联的话可以利用Ajax求情用于返回数值,然后重新渲染一下弹出窗口,进行下一步
2.、如果没有什么关系的话就直接两个层,一个现实一个隐藏,等一个填完了点下一步之后当前层隐藏,下一个层显示

MRGan | 园豆:71 (初学一级) | 2017-03-29 09:08
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册