Как сделать при обновление страницы, кнопка сохраняет положение и действия?
Кнопка при активном положение показывает скрытый блок. Хочу реализовать так чтобы при обновление страницы все это сохранялось, а не приходилось постоянно теребить ее. Абсолютно не знаю как это сделать, даже примерно.
<label class="switch"> <input type="checkbox" id="toggleSwitch"> <span class="slider round"></span> </label> <div id="hiddenContent" class="hidden"> <p>Hidden Content</p> </div> |
<label class="switch"> <input type="checkbox" id="toggleSwitch"> <span class="slider round"></span> </label> <div id="hiddenContent" class="hidden"> <p>Hidden Content</p> </div>
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: GREEN; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .hidden { display: none; } |
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: GREEN; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .hidden { display: none; }
const toggleSwitch = document.getElementById('toggleSwitch'); const hiddenContent = document.getElementById('hiddenContent'); toggleSwitch.addEventListener('change', function () { if (toggleSwitch.checked) { hiddenContent.classList.remove('hidden'); toggle.classList.add("active"); } else { hiddenContent.classList.add('hidden'); } }); |
const toggleSwitch = document.getElementById('toggleSwitch'); const hiddenContent = document.getElementById('hiddenContent'); toggleSwitch.addEventListener('change', function () { if (toggleSwitch.checked) { hiddenContent.classList.remove('hidden'); toggle.classList.add("active"); } else { hiddenContent.classList.add('hidden'); } });
Дополнительно:
При нажатии кнопки сохранять состояние в localStorage, при открытии страницы читать из localStorage и устанавливать кнопку в нужное состояние.
- спасибо
Использовать localStorage или куки.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сохранить положение и действия кнопки при обновлении страницы, можно использовать localStorage или sessionStorage в JavaScript.
Ниже приведен пример кода на JavaScript, который сохраняет состояние кнопки при клике на нее и восстанавливает это состояние при обновлении страницы:
// Получаем кнопку var button = document.getElementById('myButton'); // Проверяем, была ли кнопка активирована ранее var isButtonActivated = localStorage.getItem('isButtonActivated'); // Если кнопка была активирована, устанавливаем соответствующий класс if (isButtonActivated === 'true') { button.classList.add('active'); } // Добавляем обработчик события на клик по кнопке button.addEventListener('click', function() { // Переключаем класс кнопки button.classList.toggle('active'); // Сохраняем состояние кнопки в localStorage localStorage.setItem('isButtonActivated', button.classList.contains('active')); });
В данном примере при клике на кнопку добавляется класс 'active', который указывает на активное состояние кнопки. Далее это состояние сохраняется в localStorage. При обновлении страницы скрипт проверяет значение в localStorage и восстанавливает состояние кнопки.
Не забудьте заменить 'myButton' на ID вашей кнопки и 'active' на название класса, который вы используете для активного состояния кнопки. В зависимости от вашего дизайна и логики работы, вы можете настроить этот код под свои нужды.