我有一个包含 4 个不同步骤的进度条。有没有办法让它在您按下一个按钮时,将四个测试按钮更改为其他按钮?
基本上,我想在 4 个步骤下有 4 个不同的页面。因此,当您在第 1 步时,它会向您显示一个带有按钮的页面。当您单击下一步时,第 2 步会向您显示一些不同的内容,例如一行文本。等等……
如果您难以理解,这里有一个代码笔,其中包含我想要的结果:https://codepen.io/vajahath_ahmed/pen/xEgOdp请注意当您按下下一步时,文本是如何变化的。这就是我想要实现的目标。
$(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; */
width: auto;
margin: 10px 0 10px 50px;
}
.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: #dcc2f2;
color: #dcc2f2;
}
.step.active:before {
background: linear-gradient(to right, #ffb5d5 0%, #dcc2f2 100%);
}
.step.active:after {
color: #ffb5d5;
font-weight: bold;
}
.step.done {
background-color: #ffb5d5;
border-color: #ffb5d5;
color: white;
}
.step.done:before {
background-color: #ffb5d5;
}
.step i {
position: relative;
bottom: 3px;
}
.as-console-wrapper {
max-height: 50px!important;
top: auto;
left: auto;
right: auto;
bottom: 0;
}
<html style="width: 100%;height: 100%;">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body style="width: 100%; background-color: orange;">
</section>
<section id="newsut">
<link href="https://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="fas 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>
<a>Test</a>
<a>Test2</a>
<a>Test3</a>
<a>Test4</a>
</section>
<section id="nextpad">
<button class="previous" onclick="previous()"><span>Previous</span></button>
<button class="next" onclick="next()"><span>Next</span></button>
</section>
</body>
</html>
最佳答案
由于您使用 data-stepnum
属性作为计数器,您可以使用它来触发不同的 div。检查一下:
1。创建内容 div。
我们为每个选项卡创建一个内容 div,具有类“step-content”和属性“data-stepnum”。确保 data-stepnum 的值与每个选项卡相同。该属性是我们将选项卡与内容连接起来的部分。注意 `active` 类添加了第一个 div,因为第一个内容选项卡也是事件的。<div id="steps-content">
<div class="step-content active" data-stepnum="0">
<h2>Step content 1</h2>
</div>
<div class="step-content" data-stepnum="1">
<h2>Step content 2</h2>
</div>
<div class="step-content" data-stepnum="2">
<h2>Step content 3</h2>
</div>
<div class="step-content" data-stepnum="3">
<h2>Step content 4</h2>
</div>
</div>
2.用css隐藏内容div
现在我们要用 css 默认隐藏内容 div。只有事件类应该是可见的。.step-content{
display: none;
}
.step-content.active{
display: block;
}
3.用jQuery添加触发器
您已经在变量 stepNumber 中获得了事件类的 data-stepnum 值,因此我们可以使用它来将事件类添加到正确的内容中。我们将更改 next()
和 previous()
函数。首先用内容类名创建一个变量,只是为了更容易。
var stepContentClass = '.step-content';
接下来,更新next()
函数。当函数运行时,我们想隐藏所有内容,所以我们必须删除所有事件类。
$(stepContentClass).removeClass('active');
现在我们要显示正确的内容。您已经保存了事件的 stepNumber,因此我们使用此 data-stepnum
属性选择正确的内容。
$(stepContentClass + '[data-stepnum= ' + stepNumber + ']').next().addClass('active');
您可以使用 previous()
函数执行相同的操作。
完整功能:
function next() {
//console.log("Next", Math.random());
let latestActiveStep = $("div.step.active").not(".done");
let stepNumber = +$(latestActiveStep).data("stepnum");
var stepContentClass = '.step-content';
console.log("step", stepNumber);
$(latestActiveStep).addClass("done");
$(latestActiveStep).find("i.icon-ok").toggle();
$(latestActiveStep).find("i").not(".icon-ok").toggle();
$(latestActiveStep).next().addClass("active");
$(stepContentClass).removeClass('active');
$(stepContentClass + '[data-stepnum= ' + stepNumber + ']').next().addClass('active');
}
function previous() {
//console.log("Prev", Math.random());
let latestDoneStep = $("div.step.active.done").last();
let stepNumber = +$(latestDoneStep).data("stepnum");
var stepContentClass = '.step-content';
console.log("step", stepNumber);
$(latestDoneStep).removeClass("done");
$(latestDoneStep).next().removeClass("active");
$(latestDoneStep).find("i.icon-ok").toggle();
$(latestDoneStep).find("i").not(".icon-ok").toggle();
$(stepContentClass).removeClass('active');
$(stepContentClass + '[data-stepnum= ' + stepNumber + ']').addClass('active');
}
结果
查看此 JSFiddle 以获取完整代码:https://jsfiddle.net/0p9vekm7/
关于javascript - 步骤进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64674325/