Javascript 步骤进度条

我有一个包含4个不同步骤的进度条。有没有办法让你按下下一步按钮时，它会将四个测试按钮更改为其他按钮

基本上，我希望在4个步骤下有4个不同的页面。因此，当您进入步骤1时，它会显示一个带有按钮的页面。单击“下一步”时，步骤2会显示一些不同的内容，如一行文本。等等

如果你正在努力理解，这里有一个代码笔，我想要的结果是：注意当你按下next时，文本是如何变化的。这就是我想要达到的目标

$（文档）.ready（函数（）{
$（'.step'）。每个（函数（索引，元素）{
//元素==这个
$（元素）.not（'.active'）.addClass（'done'）；
$（'.done'）.html（''）；
如果（$（this）.is（'.active'））{
返回false；
}
});
$（'.step>i.icon-ok'）.hide（）；
});
const iconClasses=[“远fa指针”、“fas fa迫击炮杵”、“fas fa快速运输”、“fas fa购物车”]；
函数next（）{
//log（“Next”，Math.random（））；
让LateStactiveSet=$（“div.step.active”）.not（“.done”）；
设stepNumber=+$（latestActiveStep）.data（“stepnum”）；
控制台日志（“步骤”，步骤编号）；
$（latestActiveStep）.addClass（“完成”）；
$（latestActiveStep）.find（“i.icon-ok”）.toggle（）；
$（latestActiveStep）.find（“i”）.not（“.icon ok”）.toggle（）；
$（latestActiveStep）.next（）.addClass（“活动”）；
}
函数previous（）{
//log（“Prev”，Math.random（））；
让latestDoneStep=$（“div.step.active.done”）.last（）；
设stepNumber=+$（latestDoneStep）.data（“stepnum”）；
控制台日志（“步骤”，步骤编号）；
$（latestDoneStep）.removeClass（“完成”）；
$（latestDoneStep）.next（）.removeClass（“活动”）；
$（latestDoneStep）.find（“i.icon-ok”）.toggle（）；
$（latestDoneStep）.find（“i”）.not（“.icon ok”）.toggle（）；
}

@导入url(https://fonts.googleapis.com/css?family=Open+Sans:300400700600）；
身体{
背景色：#e6；
字体系列：“开放式Sans”，无衬线；
}
#台阶{
/*宽度：505px*/
/*保证金：50px自动*/
宽度：自动；
利润率：10px 0 10px 50px；
}
.步骤{
宽度：40px；
高度：40px；
背景色：白色；
显示：内联块；
边框：4px实心；
边框颜色：透明；
边界半径：50%；
颜色：#cdd0da；
字号：600；
文本对齐：居中；
线高：35px；
}
.步骤：第一个孩子{
线高：40px；
}
.步骤：第n个子项（n+2）{
利润率：0 100像素；
变换：平移（0，-4px）；
}
.步骤：第n个子项（n+2）：之前{
宽度：75px；
高度：3倍；
显示：块；
背景色：白色；
转换：转换（-95px，21px）；
内容：''；
}
.步骤：之后{
宽度：150px；
显示：块；
转换：转换（-55px，3px）；
颜色：#818698；
内容：attr（数据描述）；
字体大小：400；
字体大小：13px；
}
.步骤：第一个孩子：之后{
转换：转换（-55px，-1px）；
}
.step.active{
边框颜色：#dcc2f2；
颜色：#dcc2f2；
}
.步骤.活动：之前{
背景：线性梯度（向右，#ffb5d5 0%，#dcc2f2 100%）；
}
.步骤.活动：之后{
颜色：#ffb5d5；
字体大小：粗体；
}
.步骤.完成{
背景色：#ffb5d5；
边框颜色：#ffb5d5；
颜色：白色；
}
.步骤.完成：之前{
背景色：#ffb5d5；
}
.第一步{
位置：相对位置；
底部：3px；
}
.作为控制台包装{
最大高度：50px！重要；
顶部：自动；
左：自动；
右：自动；
底部：0；
}

试验
测试2
测试3
测试4
以前的
下一个

由于您使用的是

data stepnum

属性作为计数器，因此可以使用该属性触发不同的div。看看这个：

1.创建内容div。 我们为每个选项卡创建一个contentdiv，类为'stepcontent'，属性为'datastepnum'。确保数据步骤数的值与每个选项卡的值相同。此属性是我们将选项卡与内容连接的部分。注意'active'类添加了第一个div，因为第一个content选项卡也是活动的。

<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>

3.使用jQuery添加触发器 您已经在变量“stepNumber”中获得了活动类的“data stepnum”值，因此我们可以使用它将活动类添加到正确的内容中。 我们将更改

next（）

和

previous（）

函数。首先创建一个具有内容类名的变量，以使其更简单

var stepContentClass = '.step-content';

接下来，更新

Next（）

函数。当函数运行时，我们希望隐藏所有内容，因此必须删除所有活动类

$(stepContentClass).removeClass('active');

现在我们要显示正确的内容。您已经保存了活动步骤编号，因此我们使用此

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');
}

结果

---

检查此JSFIDLE以获取完整代码：

您希望在步骤之间更改哪些内容。它只是一个段落，一种形式还是什么？它可以是任何东西。。。现在就用文本来做吧，因为我知道如何改变它。我只需要一个机制，当你按下下一步，它会改变它显示的内容@jacc_01

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');
}