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
就是一个“下一步”按钮一共实现三个页面的跳转
我只会处理第一次的跳转，第二次的跳转就不知道怎么写了
哎，有点复杂，不知道这样描述你们懂不懂。
最佳答案
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();
} });
其他回答(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; } });
有点傻，但任你多少个下一步都能解决，哈哈~，~
不能这样啊，第一次点“下一步”只能出现一个div，第二次点“下一步”的时候才能出现最后一个div
@你猜丶: 我来理一下：
- 第一次显示页面只有两个radio，点击下一页根据所选radio呈现页面（div1或者div2）
- 继续点击下一页，根据 1 中当时所选的radio呈现页面（div3或者div4）
请问是这样么？
@你猜丶:
还是这段代码，加一个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
没看懂你要做成什么效果
就是平时安装QQ客服端啊，不是要点击下一步下一步完成吗？他每次点击下一步都能进去不同的页面，这个也是一样，我要进去第三个下一页的时候不知道怎么处理判断了。
就是一个“下一步”按钮一共实现三个页面的跳转
我只会处理第一次的跳转，第二次的跳转就不知道怎么写了
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++; });
兄弟，你这个这一句无法获取到值
radioValue = $("input[type='radio']:checked").val();
if (radioValue == '导入'){}
0
1、如果前后有关联的话可以利用Ajax求情用于返回数值，然后重新渲染一下弹出窗口，进行下一步
2.、如果没有什么关系的话就直接两个层，一个现实一个隐藏，等一个填完了点下一步之后当前层隐藏，下一个层显示
