您的位置:首页 > 其它

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

2012-12-12 10:39 441 查看
/*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>

效果图:



点击输入密码就会出现相应的内容
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  点击后切换内容