点击按钮切换相应的内容,可用于转换图片

来源:互联网 发布:jquery1.11.1.js下载 编辑:程序博客网 时间:2024/04/25 04:42
/*forget-key*/.forget_p{ border-bottom:1px solid #ff5599; padding-bottom:6px; padding-top:10px;}.for_tu{ margin:40px auto; height:27px; line-height:27px;background:url(../images/forget_07.jpg) no-repeat left center; width:460px; padding-left:200px;}.for_tu a{ float:left;padding-right:30px; height:30px; overflow:hidden; line-height:30px; width:90px; }a#a_new_text_1{ width:120px;}.for_tu a.a1{ color:#999; font-weight:bold;font-size:13px;}.for_tu a.a1:hover,for_tu a.a2{  color:#000;font-weight:bold;}.forget{ clear:both;width:470px; margin:0 auto; margin-bottom:60px; border:1px solid #cccccc; height:250px; line-height:35px;}<script src="script/jquery.min.js" type="text/javascript"></script>      <p class="for_tu"><a class="a2" id="a_new_text_1" onclick="over(1)" href="#">1 输入手机号或者邮箱号</a><a href="#" class="a1" id="a_new_text_2" onclick="over(2)">2 输入密码</a><a href="#" class="a1" id="a_new_text_3" onclick="over(3)">3 找回密码</a></p>    <div class="forget" id="over1">      <p class="for_p">请输入注册时候的手机号码,系统将会发送6位安全码到您的手机上!</p>                   <table width="85%" border="0" align="center">  <tr>    <td width="26%" height="43" align="right" valign="middle"><span class="for_se">       <input name="RadioGroup1" type="radio" id="RadioGroup1_1" value="手机号码" checked="checked" />      手机号码:</span></td>    <td width="74%" align="left" valign="middle"><span class="for_se">      <input type="text" class="text3" />    </span></td>  </tr>  <tr>    <td height="42" align="right" valign="middle">      <span class="for_se">      <input type="radio" name="RadioGroup1" value="邮箱号码" id="RadioGroup1_0" />      邮箱号码:</span></td>    <td align="left" valign="middle"><span class="for_se">      <input type="text" class="text3" />    </span></td>  </tr>  <tr>    <td height="49" align="right" valign="middle">验证码:</td>    <td align="left" valign="middle"><span class="for_se">      <input type="text" class="text3" style="width:80px;" /> <img src="images/forget_11.jpg" align="absmiddle" /><a href="#" style="text-decoration:underline; color:#999;">看不清,换一个</a>    </span></td>  </tr>  <tr>    <td align="right" valign="middle"> </td>    <td style="padding-top:10px;"><a href="#"><img src="images/forget_15.jpg" /></a></td>  </tr></table>    </div><div class="forget"  id="over2" style="display:none;">      <p class="for_p">请输入新的密码,方便您登录!</p>                   <table width="85%" border="0" align="center">  <tr>    <td width="26%" height="43" align="right" valign="middle"><span class="for_se">       输入新密码:</span></td>    <td width="74%" align="left" valign="middle"><span class="for_se">      <input type="text" class="text3" />    </span></td>  </tr>  <tr>    <td height="42" align="right" valign="middle">      <span class="for_se">      确认新密码:</span></td>    <td align="left" valign="middle"><span class="for_se">      <input type="text" class="text3" />    </span></td>  </tr>  <tr>    <td height="49" align="right" valign="middle">手机验证码:</td>    <td align="left" valign="middle"><span class="for_se">      <input type="text" class="text3" style="width:80px;" /> <img src="images/forget_11.jpg" align="absmiddle" /><a href="#" style="text-decoration:underline; color:#999;">看不清,换一个</a>    </span></td>  </tr>  <tr>    <td align="right" valign="middle"> </td>    <td style="padding-top:10px;"><a href="#"><img src="images/forget_15.jpg" /></a></td>  </tr></table>    </div><div class="forget"  id="over3" style="display:none;">      <p class="for_p" style="padding-top:40px; text-align:center; line-height:50px; font-family:'微软雅黑'; font-weight:bold; font-size:20px;">密码修改成功!</p>                       </div>

效果图:


点击输入密码就会出现相应的内容