添加下一步按钮到步骤加载栏
我有这个加载栏。当您添加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
检查下面的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>
随时随地看视频慕课网APP
相关分类
JavaScript