CSSカウンターで現在のステップを表示します

5つのボタンがあるとします。各ボタンはステップです。 4番目のボタンをクリックすると、5/5のステップ4に表示され、それを表示します。

この種のカウントと表示はハードコード化される可能性がありますが、それは面白くありません。 JavaScriptもこの仕事をすることができます。しかし、CSS？うーん。できますか？ CSSにはカウンターがあるため、ボタンの数を確実にカウントできます。しかし、どのようにして特定のボタンまでのみ計算しますか？それができることがわかります。

HTML

ボタンである必要はありません。それは私たちが数えることができるいくつかの兄弟要素である必要があります。しかし、私たちは先に進み、ここでボタンを使用します：

 <div>

  ショップ
  カート
  配送
  チェックアウト
  ありがとう

  <div> </div>

</div>

空の.message divそこには、CSSコンテンツでステップメッセージングを出力する場所があります。

CSS

トリックは、実際に3つのカウンターを使用することです。

1. すべてのボタンの合計カウント
2. 現在のステップのカウント
3. 現在のステップの後の残りのステップの数のカウント

.steps {
  カウンターリセット： 
    CurrentStep 0 
    残り0 
    合計0;
}

さて、実際にカウントをしましょう。すべてのボタンをカウントすることは簡単です：

ボタン {
  カウンターインクリメント：TotalStep;
}

次に、ボタンもカウントする別のことを数える必要があります。唯一の目的である擬似要素を使用できます。ボタンをカウントすることです。

ボタン::前{
  コンテンツ： "";
  カウンターインクリメント：CurrentStep;
}

トリックは、アクティブな要素の後にすべての要素にその擬似要素を数えるのをやめることです。このように見える.Activeクラスを使用している場合：

 button.active〜button :: before {
  /* CurrentStepが増加しないようにします！ */
  カウンターインクリメント：残り;
}

私たちはそこで残りを数えていますが、これも有用かもしれませんが、残りを増やしているだけなので、現在のステップカウンターをカウントしていません。空想、派手。

次に、カウンターを使用してメッセージングを出力できます。

メッセージ::前{
  コンテンツ： "ステップ：" counter（currentStep） " /" counter（totalstep）;
}

ここにあります！

そこには少しJavaScriptがありますので、ボタン上のアクティブ状態を移動することで遊ぶことができますが、カウントとメッセージングは​​すべてCSSです。

以上がCSSカウンターで現在のステップを表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。