CSS 카운터로 현재 단계를 표시합니다

5 개의 버튼이 있다고 가정 해 봅시다. 각 버튼은 단계입니다. 네 번째 버튼을 클릭하면 5/5의 4 단계에 있으며이를 표시하려고합니다.

이런 종류의 계산 및 표시는 하드 코딩 될 수 있지만 재미는 없습니다. JavaScript 도이 작업을 수행 할 수 있습니다. 하지만 CSS? 흠. 할 수 있습니까? CSS에는 카운터가 있으므로 버튼 수를 확실히 계산할 수 있습니다. 그러나 우리는 어떻게 특정 버튼까지만 계산합니까? 할 수 있습니다.

HTML

버튼 일 필요는 없습니다. 그것은 우리가 계산할 수있는 몇 가지 형제 요소 여야합니다. 그러나 우리는 계속해서 여기에 버튼을 사용하겠습니다.

 <div>

   상점 
   카트 
   배송 버튼>
   체크 아웃 
   감사합니다 

  <div> </div>

</div>

빈 .message div는 CSS 컨텐츠로 스텝 메시징을 출력하는 위치에 있습니다.

CSS

속임수는 실제로 세 가지 카운터를 사용한다는 것입니다.

1. 모든 버튼의 총 카운트
2. 현재 단계의 수
3. 현재 단계 후에 남은 단계의 수

 .steps {
  카운터 리셋 : 
    currentstep 0 
    나머지 0 
    Totalstep 0;
}

이제 실제로 계산을합시다. 모든 버튼을 계산하는 것은 간단합니다.

 버튼 {
  카운터 증가 : Totalstep;
}

다음으로, 우리는 버튼을 계산할 또 다른 것을 계산해야합니다. 유일한 목적 인 의사 요소를 사용할 수 있습니다. 버튼을 계산하는 것입니다.

 버튼 :: 이전 {
  콘텐츠: "";
  카운터 증가 : CurrentStep;
}

속임수는 활성 요소 후 모든 요소에 대한 의사 요소 계산을 중단하는 것 입니다. 우리가 다음과 같이 보이는 .active 클래스를 사용하는 경우 :

 button.active ~ button :: 이전 {
  /* CurrentStep이 증가하는 것을 방지합니다! */
  카운터 증가 : 나머지;
}

우리는 나머지를 계산하고 있습니다. 또한 유용 할 수도 있지만 나머지를 증가 시키기 때문에 CurrentStep 카운터를 계산 하지 않습니다 . 공상, 공상.

그런 다음 카운터를 사용하여 메시징을 출력 할 수 있습니다.

 메시지 :: 이전 {
  내용 : "단계 :"카운터 (CurrentStep) " /"카운터 (Totalstep);
}

여기 있습니다!

약간의 JavaScript가 있으므로 버튼에서 활성 상태를 움직일 수 있지만 계산 및 메시지는 모두 CSS입니다.

위 내용은 CSS 카운터로 현재 단계를 표시합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!