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

/*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" οnclick="over(1)" href="#">1 输入手机号或者邮箱号</a><a href="#" class="a1" id="a_new_text_2" οnclick="over(2)">2 输入密码</a><a href="#" class="a1" id="a_new_text_3" οnclick="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>

效果图:


点击输入密码就会出现相应的内容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值