AngelMerku40 20.03.2023 11:31

Как создать переключатель на веб-странице с использованием JavaScript?

Здравствуйте! Нужна помощь с созданием переключателя на моей веб-странице с использованием JavaScript. Я хочу добавить функциональность, чтобы пользователь мог переключать между двумя разными блоками информации, просто нажимая на кнопку.

Вот мой код:


<button id="toggleButton">Переключить блоки</button>

<div id="block1">
  <p>Это первый блок информации.</p>
</div>

<div id="block2" style="display: none;">
  <p>Это второй блок информации.</p>
</div>

Как мне написать JavaScript код, который будет переключать отображение блоков, когда пользователь нажимает на кнопку? Я хочу, чтобы при первом нажатии на кнопку отображался первый блок информации, а при следующем нажатии - второй блок, и так далее.

Спасибо заранее за помощь!

Ответы:

Sentimental42 20.03.2023 11:50
Вам необходимо использовать JavaScript события для отслеживания нажатия на кнопку и изменения стиля отображения блоков.
Eliza30Friend 20.03.2023 11:59

Для создания переключателя на веб-странице с использованием JavaScript, вам понадобится добавить обработчик события на кнопку, который будет менять стиль отображения блоков информации.

Вот обновленный код с добавленным JavaScript:


// Получаем ссылки на кнопку и блоки информации
var toggleButton = document.getElementById('toggleButton');
var block1 = document.getElementById('block1');
var block2 = document.getElementById('block2');

// Добавляем обработчик события на кнопку
toggleButton.addEventListener('click', function() {
  // Проверяем текущий стиль отображения блоков информации
  if (block1.style.display === 'none') {
    // Если первый блок скрыт, отображаем его и скрываем второй блок
    block1.style.display = 'block';
    block2.style.display = 'none';
  } else {
    // Иначе, если первый блок отображается, скрываем его и отображаем второй блок
    block1.style.display = 'none';
    block2.style.display = 'block';
  }
});

Теперь, когда пользователь нажимает на кнопку "Переключить блоки", JavaScript код будет выполняться и менять стиль отображения блоков информации. При первом нажатии, первый блок будет отображаться, а при следующем нажатии - второй блок, и так далее.

Надеюсь, это поможет! Если у вас возникнут еще вопросы, не стесняйтесь спрашивать.

Добавить ответ