<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery简单步骤</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<body>
<div style="width:625px;margin:0 auto;">
<!-- 标题进度条 start-->
<div class="content" style="margin:30px 0 0 0;width: 100%;">
<div class="processBar">
<div id="line0" class="bar">
<div id="point0" class="c-step c-select">
<span style="display: block;color: #FFFFFF;height: 30px;line-height: 30px;text-align: center">1</span>
</div>
<div id="dagou0" class="dagou" style="display: none;"></div>
</div>
<div class="text" style="margin: 10px -25px;"><span class='poetry'>第一步</span></div>
</div>
<div class="processBar">
<div id="line1" class="bar">
<div id="point1" class="c-step">
<span style="display: block;color: #FFFFFF;height: 30px;line-height: 30px;text-align: center">2</span>
</div>
<div id="dagou1" class="dagou" style="display: none;"></div>
</div>
<div class="text" style="margin: 10px -30px;"><span class='poetry'>第二步</span></div>
</div>
<div class="processBar">
<div id="line2" class="bar" style="width: 0;">
<div id="point2" class="c-step">
<span style="display: block;color: #FFFFFF;height: 30px;line-height: 30px;text-align: center">3</span>
</div>
</div>
<div class="text" style="margin: 10px -30px;"><span class='poetry'>完成</span></div>
</div>
</div>
<!-- 标题进度条 end-->
<div style="clear: both;"></div>
<div id="MainContent" style="margin:30px 0 0 0;">
<div class="content" id="basicInfo">
<span class='poetry'>
引入jquery.js
</span>
</div>
<div class="content" id="education">
<span class='poetry'>
写好布局<br/>
</span>
</div>
<div class="content" id="work">
<span class='poetry'>
完成案例
</span>
</div>
</div>
<div style="clear: both;"></div>
<div style="text-align: center;">
<button id="qx">取消</button>
<button id="previous_step">上一步</button>
<button id="next_step">下一步</button>
<button id="wc" style="display: none;">完成</button>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#education").addClass('main-hide');
$("#work").addClass('main-hide');
$('#previous_step').hide();
/*上一步*/
$('#previous_step').bind('click', function () {
index--;
ControlContent(index);
});
/*下一步*/
$('#next_step').bind('click', function () {
index++;
ControlContent(index);
});
});
var index=0;
function ControlContent(index) {
var stepContents = ["basicInfo","education","work"];
var key;//数组中元素的索引值
for (key in stepContents) {
var stepContent = stepContents[key];//获得元素的值
if (key == index) {
if(stepContent=='basicInfo'){
$('#previous_step').hide();
}else{
$('#previous_step').show();
}
if(stepContent=='basicInfo'){
$('#qx').show();
}else{
$('#qx').hide();
}
if(stepContent=='work'){
$('#next_step').hide();
}else{
$('#next_step').show();
}
if(stepContent=='work'){
$('#wc').show();
}else{
$('#wc').hide();
}
$('#'+stepContent).removeClass('main-hide');
$('#point'+key).addClass('c-select');
$('#line'+key).removeClass('b-select');
}else {
$('#'+stepContent).addClass('main-hide');
if(key>index){
$('#point'+key).removeClass('c-select');
$('#line'+key).removeClass('b-select');
}else if(key<index){
$('#point'+key).addClass('c-select');
$('#line'+key).addClass('b-select');
}
}
}
}
</script>
</html>
.processBar {float:left;width:200px;margin-top:15px;}
.processBar .bar {background:rgb(230,224,236);height:3px;position:relative;width:150px;margin-left:20px;}
.processBar .b-select {background:rgb(96,72,124);}
.processBar .bar .c-step {position:absolute;width:30px;height:30px;border-radius:50%;background:rgb(230,224,236);left:-40px;margin-top:-15px;}
.processBar .bar .c-select {width:30px;height:30px;margin:-5px -1px;background:rgb(96,72,124);margin-top:-15px;}
.main-hide {position:absolute;top:-9999px;left:-9999px;}
.poetry {color:rgb(96,72,124);font-family:KaiTi_GB2312,KaiTi,STKaiti;font-size:16px;background-color:transparent;font-weight:bold;font-style:normal;text-decoration:none;}
button {width:80px;line-height:30px;font-size:11px;color:rgb(116,42,149);text-align:center;border-radius:6px;border:1px solid #e2e2e2;cursor:pointer;background-color:#fff;outline:none;}
button:hover {border:1px solid rgb(179,161,200);}
/**打钩*/
.dagou {display:inline-block;position:relative;width:30px;height:30px;border-radius:50%;background:rgb(96,72,124);}
.dagou:before,.dagou:after {content:'';pointer-events:none;position:absolute;color:white;border:1px solid;background-color:white;}
.dagou:before {width:4px;height:3px;left:25%;top:50%;transform:skew(0deg,50deg);}
.dagou:after {width:9px;height:3px;left:45%;top:42%;transform:skew(0deg,-50deg);}
已写步骤打钩CSS样式，暂时隐藏，现在是点击下一步，圆圈2会高亮显示，前一步骤圆圈1也是高亮显示，怎么改成点击下一步，圆圈2高亮，圆圈1应用变成打钩样式？
function ControlContent(index) {
let $cStepArr=$(".c-step");//获取所有的步骤数字
let $dagou=$(".dagou");//获取所有打勾
let stepMax=$cStepArr.length;//获取步骤总数
for(let i=0;i<stepMax;i++){//更新所有步骤对应的数字和打勾 小于当前步骤的显示勾
if(i<index){
$cStepArr.eq(i).hide();$dagou.eq(i).show()
}else{
$cStepArr.eq(i).show();$dagou.eq(i).hide()
}
}
var stepContents = ["basicInfo","education","work"];
var key;//数组中元素的索引值
for (key in stepContents) {
var stepContent = stepContents[key];//获得元素的值
if (key == index) {
if(stepContent=='basicInfo'){
$('#previous_step').hide();
}else{
$('#previous_step').show();
}
if(stepContent=='basicInfo'){
$('#qx').show();
}else{
$('#qx').hide();
}
if(stepContent=='work'){
$('#next_step').hide();
}else{
$('#next_step').show();
}
if(stepContent=='work'){
$('#wc').show();
}else{
$('#wc').hide();
}
$('#'+stepContent).removeClass('main-hide');
$('#point'+key).addClass('c-select');
$('#line'+key).removeClass('b-select');
}else {
$('#'+stepContent).addClass('main-hide');
if(key>index){
$('#point'+key).removeClass('c-select');
$('#line'+key).removeClass('b-select');
}else if(key<index){
$('#point'+key).addClass('c-select');
$('#line'+key).addClass('b-select');
}
}
}
}