Чтобы настроить динамическое отображение шагов в квизе и добавить класс активности к текущему шагу, можно использовать JavaScript (или фреймворки, такие как Vue, React или Angular, если они уже используются в проекте) для управления состоянием активного шага. В качестве примера я покажу, как это можно сделать на чистом JavaScript.
Предположим, у вас есть HTML-структура квиза:
```html
<div id="quiz-container">
<div class="quiz-step active" id="step-1">
<!-- Содержимое шага 1 -->
</div>
<div class="quiz-step" id="step-2">
<!-- Содержимое шага 2 -->
</div>
<div class="quiz-step" id="step-3">
<!-- Содержимое шага 3 -->
</div>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
</div>
```
В вашем CSS должен быть стиль для класса `active`, который выделяет текущий активный шаг:
```css
.quiz-step {
display: none;
}
.quiz-step.active {
display: block;
}
```
Теперь добавим JavaScript, который будет управлять отображением шагов и классом активности:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var currentStep = 1; // Начинаем с первого шага
var steps = document.querySelectorAll('.quiz-step');
var prevButton = document.getElementById('prev');
var nextButton = document.getElementById('next');
// Функция для обновления видимости шагов
function updateStepVisibility() {
steps.forEach(function(step, index) {
if (index + 1 === currentStep) {
step.classList.add('active');
} else {
step.classList.remove('active');
}
});
}
// Обновляем видимость шагов при инициализации
updateStepVisibility();
// Функция для перехода к следующему шагу
nextButton.addEventListener('click', function() {
if (currentStep < steps.length) {
currentStep++;
updateStepVisibility();
}
});
// Функция для перехода к предыдущему шагу
prevButton.addEventListener('click', function() {
if (currentStep > 1) {
currentStep--;
updateStepVisibility();
}
});
});
```
Этот код будет динамически переключать активные шаги в интерфейсе пользователя при нажатии кнопок "Вперед" и "Назад", не используя никаких костылей. По мере изменения текущего шага (`currentStep`), функция `updateStepVisibility()` обновляет классы активности, отображая нужный шаг и скрывая остальные.
Этот подход является базовым и предполагает, что все шаги уже загружены в DOM. Если вы хотите добавить более сложные функции, такие как анимация между шагами, ленивая загрузка содержимого шага или интеграцию с API, вы можете адаптировать и расширить этот код для учета новых требований.