那那哥 2017-08-02 02:42 采纳率: 100%
浏览 2453
已采纳

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里的按钮显示第三个

  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2017-08-02 02:52
    关注
     <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 qt中connect两个signal
  • ¥20 pix2pixHD运行测试命令时出现数据类型错误无法反向传播的问题
  • ¥15 python处理Excel符合条件的行自动填写数据分类
  • ¥15 汇编hook举例并讲解(通俗易懂,学习用)
  • ¥20 用c++语言模拟键盘电子琴设计
  • ¥15 STM32cubemx生成keil工程,有问题与正常的情况不同,求解!
  • ¥15 如何自动点击银行app的安全键盘,实现密码自动输入
  • ¥15 关于四边形重叠的问题
  • ¥15 用verilog语言设计一个简易的八音符电子琴,可通过按键输入来控制音响。演奏时可以选择是手演奏(由键盘输入)或自动演奏已存入的乐曲。能够自动演奏多首乐曲,且每首乐曲可重复演奏
  • ¥15 sap gui脚本每次到导出Excel的时候就停住不动。不会另存为。