<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery和CSS3手风琴样式分步向导特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header class="htmleaf-header">
<h1>jQuery和CSS3手风琴样式分步向导特效 <span>Awesome checkout wizard using jQuery & CSS3</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<section class="htmleaf-container">
<div class="container">
<ul class="payment-wizard">
<li class="active">
<div class="wizard-heading">
1. Login Information
<span class="icon-user"></span>
</div>
<div class="wizard-content">
<p>Create your Login Form here as per your requirement.</p>
<button class="btn-green done" type="submit">Continue</button>
</div>
</li>
<li>
<div class="wizard-heading">
2. Delivery Address
<span class="icon-location"></span>
</div>
<div class="wizard-content">
<p>User address details section.</p>
<button class="btn-green done" type="submit">Continue</button>
</div>
</li>
<li>
<div class="wizard-heading">
3. Order Summary
<span class="icon-summary"></span>
</div>
<div class="wizard-content">
<p>Order summary details section.</p>
<button class="btn-green done" type="submit">Continue</button>
</div>
</li>
<li>
<div class="wizard-heading">
4. Payment Method
<span class="icon-mode"></span>
</div>
<div class="wizard-content">
<p>Your payment methods detail section.</p>
<button class="btn-green" type="submit">Done</button>
</div>
</li>
</ul>
</div>
</section>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript">
$(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();
}
});
})
</script>
</body>
</html>