一款CSS3手风琴样式分步向导特效,未完成和完成状态有不同的效果,步骤可以自由增加和删除,喜欢的就收下吧!
页面的head部分仅需要引入CSS样式即可,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分先设置好每个步骤的容器,代码如下:
<section class="jq22-container">
<div class="container">
<ul class="payment-wizard">
<li class="active">
<div class="wizard-heading">
1. 要求
<span class="icon-user"></span>
</div>
<div class="wizard-content">
<p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
<button class="btn-green done" type="submit">下一步</button>
</div>
</li>
<li>
<div class="wizard-heading">
2. 信念
<span class="icon-location"></span>
</div>
<div class="wizard-content">
<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
<button class="btn-green done" type="submit">下一步</button>
</div>
</li>
<li>
<div class="wizard-heading">
3. 接受
<span class="icon-summary"></span>
</div>
<div class="wizard-content">
<p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
<button class="btn-green done" type="submit">下一步</button>
</div>
</li>
<li>
<div class="wizard-heading">
4. 实现
<span class="icon-mode"></span>
</div>
<div class="wizard-content">
<p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
<button class="btn-green" type="submit">完成</button>
</div>
</li>
</ul>
</div>
</section>
然后引入jQuery库,设置好点击事件的响应,代码如下:
$(window).load(function(){
$(".done").click(function(){
var this_li_ind = $(this).parent().parent("li").index();
if($('.payment-wizard li').hasClass("jump-here")){
$(this).parent().parent("li").removeClass("active").addClass("completed");
$(this).parent(".wizard-content").slideUp();
$('.payment-wizard li.jump-here').removeClass("jump-here");
}else{
$(this).parent().parent("li").removeClass("active").addClass("completed");
$(this).parent(".wizard-content").slideUp();
$(this).parent().parent("li").next("li:not('.completed')").addClass('active').children('.wizard-content').slideDown();
}
});
$('.payment-wizard li .wizard-heading').click(function(){
if($(this).parent().hasClass('completed')){
var this_li_ind = $(this).parent("li").index();
var li_ind = $('.payment-wizard li.active').index();
if(this_li_ind < li_ind){
$('.payment-wizard li.active').addClass("jump-here");
}
$(this).parent().addClass('active').removeClass('completed');
$(this).siblings('.wizard-content').slideDown();
}
});
})
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791