我有这个加载栏。当您添加active到时div class="step"，它会增加进度。如何添加下一个和上一个按钮，根据您所在的步骤激活该按钮。请帮忙！$(document).ready(function() { $('.step').each(function(index, element) { // element == this $(element).not('.active').addClass('done'); $('.done').html('<i class="icon-ok"></i>'); if ($(this).is('.active')) { return false; } });});<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CodePen - loadingbar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="./style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script></head><body> <!-- partial:index.partial.html --> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <div id="steps"> <div class="step active" data-desc="Listing information"><i class="far fa-hand-pointer"></i></div> <div class="step" data-desc="Photos & Details"><i class="fas fa-mortar-pestle"></i></div> <div class="step" data-desc="Review & Post"><i class="fas fa-shipping-fast"></i></div> <div class="step" data-desc="Your order"><i class="fas fa-shopping-cart"></i></div> </div> <!-- Try adding the active class to another 'step' to see what's going on :)--> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="./script.js"></script></body></html>
1 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
检查下面的next()和previous()功能，我认为它们可以实现您的目标。
另外，我不清楚你的$(document).ready()功能是如何必要的，也可能不是。
$(document).ready(function() {
$('.step').each(function(index, element) {
// element == this
$(element).not('.active').addClass('done');
$('.done').html('<i class="icon-ok"></i>');
if ($(this).is('.active')) {
return false;
}
});
$('.step>i.icon-ok').hide();
});
const iconClasses = ['far fa-hand-pointer', 'fas fa-mortar-pestle', 'fas fa-shipping-fast', 'fas fa-shopping-cart'];
function next() {
//console.log("Next", Math.random());
let latestActiveStep = $("div.step.active").not(".done");
let stepNumber = +$(latestActiveStep).data("stepnum");
console.log("step", stepNumber);
$(latestActiveStep).addClass("done");
$(latestActiveStep).find("i.icon-ok").toggle();
$(latestActiveStep).find("i").not(".icon-ok").toggle();
$(latestActiveStep).next().addClass("active");
}
function previous() {
//console.log("Prev", Math.random());
let latestDoneStep = $("div.step.active.done").last();
let stepNumber = +$(latestDoneStep).data("stepnum");
console.log("step", stepNumber);
$(latestDoneStep).removeClass("done");
$(latestDoneStep).next().removeClass("active");
$(latestDoneStep).find("i.icon-ok").toggle();
$(latestDoneStep).find("i").not(".icon-ok").toggle();
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600);
body {
background-color: #e6e6e6;
font-family: 'Open Sans', sans-serif;
}
#steps {
width: 505px;
margin: 50px auto;
}
.step {
width: 40px;
height: 40px;
background-color: white;
display: inline-block;
border: 4px solid;
border-color: transparent;
border-radius: 50%;
color: #cdd0da;
font-weight: 600;
text-align: center;
line-height: 35px;
}
.step:first-child {
line-height: 40px;
}
.step:nth-child(n+2) {
margin: 0 0 0 100px;
transform: translate(0, -4px);
}
.step:nth-child(n+2):before {
width: 75px;
height: 3px;
display: block;
background-color: white;
transform: translate(-95px, 21px);
content: '';
}
.step:after {
width: 150px;
display: block;
transform: translate(-55px, 3px);
color: #818698;
content: attr(data-desc);
font-weight: 400;
font-size: 13px;
}
.step:first-child:after {
transform: translate(-55px, -1px);
}
.step.active {
border-color: #73b5e8;
color: #73b5e8;
}
.step.active:before {
background: linear-gradient(to right, #58bb58 0%, #73b5e8 100%);
}
.step.active:after {
color: #73b5e8;
}
.step.done {
background-color: #58bb58;
border-color: #58bb58;
color: white;
}
.step.done:before {
background-color: #58bb58;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - loadingbar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div id="steps">
<div class="step active" data-stepnum="0" data-desc="Listing information"><i class="far fa-hand-pointer"></i><i class="icon-ok"></i></div>
<div class="step" data-stepnum="1" data-desc="Photos & Details"><i class="fas fa-mortar-pestle"></i><i class="icon-ok"></i></div>
<div class="step" data-stepnum="2" data-desc="Review & Post"><i class="fas fa-shipping-fast"></i><i class="icon-ok"></i></div>
<div class="step" data-stepnum="3" data-desc="Your order"><i class="fas fa-shopping-cart"></i><i class="icon-ok"></i></div>
</div>
<button onclick="previous()">Previous</button>
<button onclick="next()">Next</button>
<!--
Try adding the active class to another 'step'
to see what's going on :)
-->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
添加回答
举报
0/150
提交
取消