jQuery分步步骤控制

一款jQuery分步步骤控制的特效代码，可以点击页面的按钮来切换步骤，切换的同时会显示当前步骤的索引序号（默认从0开始），步骤间的切换是一个进度条的动画，整体效果还是很不错的哦，喜欢的童鞋请收下吧。

分类：选项卡/滑动门 > 图片选项卡难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入jQuery库、step插件及其样式文件，并设置好页面元素的样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/jquery.step.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.step.min.js"></script>
<style type="text/css">
button {
	display: inline-block;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff;
	background-color: #5bc0de;
}

.main {
	width: 1000px;
	margin: 100px auto;
}

#step {
	margin-bottom: 60px;
}

.btns {
	float: left;
}

.info {
	float: left;
	height: 34px;
	line-height: 34px;
	margin-left: 40px;
	font-size: 28px;
	font-weight: bold;
	color: #928787;
}

.info span {
	color: red;
}
</style>

页面的body部分，div容器里的结构还是比较简单的，代码如下：

<div class="main">
	<div id="step"></div>
	<div class="btns">
		<button id="prevBtn">上一步</button>
		<button id="nextBtn">下一步</button>
		<button id="btn1">跳到第二步</button>
		<button id="btn2">跳到第三步</button>
	</div>
	<div class="info">index：<span id="index"></span></div>
</div>

页面的底部，设置好各步骤对应的标题、切换时间和点击按钮的事件响应，代码如下：

<script type="text/javascript">
var $step = $("#step");
var $index = $("#index");

$step.step({
	index: 0,
	time: 500,
	title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]
});

$index.text($step.getIndex());

$("#prevBtn").on("click", function() {
	$step.prevStep();
	$index.text($step.getIndex());
});

$("#nextBtn").on("click", function() {
	$step.nextStep();
	$index.text($step.getIndex());
});

$("#btn1").on("click", function() {
	$step.toStep(1);
	$index.text($step.getIndex());
});

$("#btn2").on("click", function() {
	$step.toStep(2);
	$index.text($step.getIndex());
});
</script>