jq 控制四个div只显示一个
 <div class="find_txt">
    <div class="find_txt_con"><label>手机号码</label><input type="text" placeholder="请输入您的手机号" style="width:272px;"/></div>
    <div class="find_txt_con"><label>手机验证码</label><input type="text" placeholder="输入验证码"/><div id="v_container" style="width:110px;height:32px;float:right"></div></div>
    <p><input id="my_button" type="button" value="提交"></p>
</div>
<div class="find_txt" style="display:none">
    <div class="find_txt_con"><label>手机号</label><label>13611020766</label></div><br/>
    <div class="find_txt_con"><label>验证码</label><input type="text" placeholder="输入验证码"/></div>
    <p><input type="button" value="验证"></p>
    <p style="font-weight:600;">如果您在1分钟之内没有收到验证码,请<a href="#">获取验证码</a></p>
</div>
<div class="find_txt" style="display:none">
    <div class="find_txt_con"><label>新密码</label><input type="text" placeholder="8~16位数字、字母或符号组合"/></div>
    <div class="find_txt_con"><label>确认新密码</label><input type="text" placeholder="8~16位数字、字母或符号组合"/></div>
    <p><input type="button" value="确定"></p>
</div>
<div class="find_txt" style="display:none">
    <p class="find_sec"><i class="fin1"></i></p>
    <p class="find_sec">恭喜,登录密码重置成功!</p>
    <p class="find_sec"><input type="button" value="去登录"></p>
</div>

点击第一个按钮显示第二个div隐藏其他div,点击第二个div里的按钮显示第三个

jq js

1个回答

 <div class="find_txt">
    <div class="find_txt_con"><label>手机号码</label><input type="text" placeholder="请输入您的手机号" style="width:272px;" /></div>
    <div class="find_txt_con"><label>手机验证码</label><input type="text" placeholder="输入验证码" /><div id="v_container" style="width:110px;height:32px;float:right"></div></div>
    <p><input id="my_button" type="button" value="提交"></p>
</div>
<div class="find_txt" style="display:none">
    <div class="find_txt_con"><label>手机号</label><label>13611020766</label></div><br />
    <div class="find_txt_con"><label>验证码</label><input type="text" placeholder="输入验证码" /></div>
    <p><input type="button" value="验证"></p>
    <p style="font-weight:600;">如果您在1分钟之内没有收到验证码,请<a href="#">获取验证码</a></p>
</div>
<div class="find_txt" style="display:none">
    <div class="find_txt_con"><label>新密码</label><input type="text" placeholder="8~16位数字、字母或符号组合" /></div>
    <div class="find_txt_con"><label>确认新密码</label><input type="text" placeholder="8~16位数字、字母或符号组合" /></div>
    <p><input type="button" value="确定"></p>
</div>
<div class="find_txt" style="display:none">
    <p class="find_sec"><i class="fin1"></i></p>
    <p class="find_sec">恭喜,登录密码重置成功!</p>
    <p class="find_sec"><input type="button" value="去登录"></p>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(':button').click(function () {
        $(this).closest('div.find_txt').hide().next().show()
    })
</script>
showbo
支付宝加好友偷能量挖 回复那那哥: 注意你的结构,这个代码只适合你这个结构,还插入了其他内容自己要修改选择器
2 年多之前 回复
xiuxiu567
那那哥 没问题了
2 年多之前 回复
xiuxiu567
那那哥 跳到第二个页面,点击就不跳转了,input加了ID也不管用
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问