使用 CSS 计数器显示当前步骤

假设您有五个按钮。每个按钮代表一个步骤。如果您点击第四个按钮，您将处于第 4 步（共 5 步），并且您希望显示这一点。

这种计数和显示方式可以硬编码，但这并不有趣。JavaScript 也可以完成这项工作。但是 CSS 呢？嗯。可以吗？CSS 有计数器，因此我们当然可以计算按钮的数量。但是我们如何仅计算到某个特定按钮呢？事实证明，这是可以做到的。

HTML

它不必须是按钮；它只需要是一些我们可以计数的兄弟元素。但我们将在本文中使用按钮

<div class="steps">

  <button class="active">Shop</button>
  <button>Cart</button>
  <button>Shipping</button>
  <button>Checkout</button>
  <button>Thank You</button>

  <div class="message"></div>

</div>

那里的空.message div 将是我们将使用 CSS 内容输出步骤消息的地方。

CSS

诀窍是我们实际上将使用三个计数器

1. 所有按钮的总数
2. 当前步骤的计数
3. 当前步骤之后剩余步骤的数量

.steps {
  counter-reset: 
    currentStep 0 
    remainder 0 
    totalStep 0;
}

现在让我们真正进行计数。计算所有按钮很简单

button {
  counter-increment: totalStep;
}

接下来，我们需要另一件事来计数，它也将计数按钮。我们可以使用一个伪元素，它的唯一目的是计数按钮

button::before {
  content: "";
  counter-increment: currentStep;
}

诀窍是停止在活动元素之后的所有元素上计算该伪元素。如果我们使用一个像这样的.active类

button.active ~ button::before {
  /* prevents currentStep from being incremented! */
  counter-increment: remainder;
}

我们正在那里计算remainder，这可能也有用，但因为我们仅递增了remainder，这意味着我们没有计算currentStep计数器。太棒了。

然后我们可以使用计数器输出我们的消息

message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep);
}

就是这样！

那里有一点 JavaScript，所以您可以玩玩在按钮上移动活动状态，但计数和消息传递都是 CSS。