以下我写的 jq不对。还望大神帮我纠正下添加我想要的效果。
$("#J_phone").click(function(){ //这是按钮块
$(".forget_main").find(".forget_main").hide().next().removeClass("hidden");
$(".icon-forget").addClass("icon-forge-2");
})
我想在单击按钮的时候把手机步骤(1)隐藏,然后手机步骤 (2) show就出来。
再单击下一步的按钮 第二步的hide().第三步就slow()。
<!--手机步骤(1)-->
<div class="forget_main">
<div class="form_1">
<div class="qipao">
<div class="tag">
<div class="arrow">
<em>◆</em><span>◆</span>
</div>
<span>请输入您的登录名</span>
</div>
</div>
</div>
<div class="form_2">
<div class="qipao">
<div class="tag">
<div class="arrow">
<em>◆</em><span>◆</span>
</div>
<span>请输入正确的登陆名</span>
</div>
</div>
</div>
<div class="logo_name">
<span class="f14">登陆名: </span>
<input type="text" placeholder="请输入手机号/邮箱/微信" id="pass" onclick="pass()">
</div>
<div class="logo_code">
<span class="f14">验证码:</span>
<input type="text">
<a href="">
<img src="res/img/code_03.jpg" alt="">
<span class="f14">换一张</span>
</a>
<div class="weichat_code">
<div class="wecode">微信二维码</div>
<div class="wecode1"><img src="res/img/images/weichat2_03.jpg" alt=""></div>
<div class="wecode2">扫二维码找回</div>
</div>
<div class="form-back">
<button class="phone_b" id="J_phone">手机找回</button>
<button class="email_b">邮箱找回</button>
</div>
</div>
</div>
<!--手机步骤(2)-->
<div class="forget_main p79 hidden">
<div class="sms"> 短信已发送!</div>
<p class="text_1">今日开抢网已向您的手机 <span>186*****383 </span> 发送了验证码短信,请您及时查看。</p>
<div class="text_2">
<span> 短信验证码 :</span>
<input type="text" placeholder="请输入短信验证码">
<button>获取验证码</button>
</div>
<div class="ht col-lg-offset-4">
<button class="confirm">确定</button>
</div>
</div>
<!--邮箱步骤(2)-->
<div class="forget_main p79 hidden">
<div class="sms"> 邮件已发送!</div>
<p class="text_1">验证邮件已发送至您的邮箱 <span>12*****87@qq.com,</span> 请点击邮件中的链接重置您的密码。
请在24小时内通过邮件中的链接重设密码。</p>
<div class="ht col-lg-offset-4">
<button class="confirm">去邮箱查看</button>
<button class="resending">去邮箱查看</button>
</div>
</div>
<!--微信(2)-->
<div class="forget_main p79 hidden">
<div class="msm_send">信息已发送!
</div>
<div class="msm_send f12"> 您的账号资料已发送至您的微信,请勿泄漏给他人,请牢记!</div>
<div class="ht lf">
<button class="confirm">抢购去</button>
</div>
</div>
<!--设置新密码(3)-->
<div class="forget_main hidden">
<div class="new_pss">
<span class="w84"> 新密码:</span>
<input type="text" placeholder="由8-20位字母,数字和符号组合">
</div>
<div class="safe_level">
<span class="w84"> 安全级别: </span>
<i class="safe_level_l "></i> <!--弱-->
<i class="safe_level_l2 "></i> <!--中-->
<i class="safe_level_l3"></i><!--强-->
</div>
<div class="new_pss">
<span class="w84"> 确认密码:</span>
<input type="text" placeholder="请再次输入上面的密码">
</div>
<div class="ht col-lg-offset-4">
<button class="confirm">确定</button>
</div>
</div>
<!--成功(4)-->
<div class="forget_main hidden">
<p class="congratulate">
恭喜您,您的新密码已设置成功,请您牢记!为了保证您的购物安全,<br>
请不要轻易泄露给他人,建议您定期更改密码以保护账户安全。
</p>
<div class="ht col-lg-offset-4">
<button class="confirm">确定</button>
</div>
</div>
设定
.forget_main
默认为不可见.设置
.forget_main.show
为可见状态.jQuery
通过.forget_main.show
找到当前显示的这个, 然后根据需要决定是用next/prev
来找它下一个/上一个节点, 然后切换样式, 实现显示/隐藏.
<meta charset="utf-8"/>
<style type="text/css">
.forget_main{display:none;}
.forget_main.show{display:block;}
</style>
<div>
<!--手机步骤(1)-->
<div class="forget_main show">
<div class="form_1">
<div class="qipao">
<div class="tag">
<div class="arrow">
<em>◆</em><span>◆</span>
</div>
<span>请输入您的登录名</span>
</div>
</div>
</div>
<div class="form_2">
<div class="qipao">
<div class="tag">
<div class="arrow">
<em>◆</em><span>◆</span>
</div>
<span>请输入正确的登陆名</span>
</div>
</div>
</div>
<div class="logo_name">
<span class="f14">登陆名: </span>
<input type="text" placeholder="请输入手机号/邮箱/微信" id="pass" onclick="pass()">
</div>
<div class="logo_code">
<span class="f14">验证码:</span>
<input type="text">
<a href="">
<img src="res/img/code_03.jpg" alt="">
<span class="f14">换一张</span>
</a>
<div class="weichat_code">
<div class="wecode">微信二维码</div>
<div class="wecode1"><img src="res/img/images/weichat2_03.jpg" alt=""></div>
<div class="wecode2">扫二维码找回</div>
</div>
<div class="form-back">
<button class="phone_b" id="J_phone">手机找回</button>
<button class="email_b">邮箱找回</button>
</div>
</div>
</div>
<!--手机步骤(2)-->
<div class="forget_main p79">
<div class="sms"> 短信已发送!</div>
<p class="text_1">今日开抢网已向您的手机 <span>186*****383 </span> 发送了验证码短信,请您及时查看。</p>
<div class="text_2">
<span> 短信验证码 :</span>
<input type="text" placeholder="请输入短信验证码">
<button>获取验证码</button>
</div>
<div class="ht col-lg-offset-4">
<button class="confirm">确定</button>
</div>
</div>
<!--邮箱步骤(2)-->
<div class="forget_main p79">
<div class="sms"> 邮件已发送!</div>
<p class="text_1">验证邮件已发送至您的邮箱 <span>12*****87@qq.com,</span> 请点击邮件中的链接重置您的密码。
请在24小时内通过邮件中的链接重设密码。</p>
<div class="ht col-lg-offset-4">
<button class="confirm">去邮箱查看</button>
<button class="resending">去邮箱查看</button>
</div>
</div>
<!--微信(2)-->
<div class="forget_main p79">
<div class="msm_send">信息已发送!
</div>
<div class="msm_send f12"> 您的账号资料已发送至您的微信,请勿泄漏给他人,请牢记!</div>
<div class="ht lf">
<button class="confirm">抢购去</button>
</div>
</div>
<!--设置新密码(3)-->
<div class="forget_main">
<div class="new_pss">
<span class="w84"> 新密码:</span>
<input type="text" placeholder="由8-20位字母,数字和符号组合">
</div>
<div class="safe_level">
<span class="w84"> 安全级别: </span>
<i class="safe_level_l "></i> <!--弱-->
<i class="safe_level_l2 "></i> <!--中-->
<i class="safe_level_l3"></i><!--强-->
</div>
<div class="new_pss">
<span class="w84"> 确认密码:</span>
<input type="text" placeholder="请再次输入上面的密码">
</div>
<div class="ht col-lg-offset-4">
<button class="confirm">确定</button>
</div>
</div>
<!--成功(4)-->
<div class="forget_main">
<p class="congratulate">
恭喜您,您的新密码已设置成功,请您牢记!为了保证您的购物安全,<br>
请不要轻易泄露给他人,建议您定期更改密码以保护账户安全。
</p>
<div class="ht col-lg-offset-4">
<button class="confirm">确定</button>
</div>
</div>
</div>
<hr/>
<h2>这里的只是做演示, 你可以在你需要的时候调用 Go 方法, 去实现向后/前跳</h2>
<input type="button" value="Prev" id="Prev" />
<input type="button" value="Next" id="Next" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
(function(){
var Go = function (direction){
var current = $('.forget_main.show'),
target = current[direction]();
if(target.length === 0){
return;
}
//隐藏当前的
current.removeClass('show');
target.addClass('show');
};
//为了安全期间 Go 函数定义为局部变量, 请将你的代码写在这个代码块内,
//以便可以访问 Go 这个函数.
$('#Prev').click(function(){
Go('prev');
});
$('#Next').click(function(){
Go('next');
});
})();
</script>
试试这个可不可以
$("#J_phone").click(function(){ //这是按钮块
var parent = $(this).parents(".forget_main");
var next=parent.next(".forget_main");
parent.addClass("hidden");
next.removeClass("hidden");
$(".icon-forget").addClass("icon-forge-2");
})