页面刷新后保持类切换 [英] Keep Class toggled after Page Refresh
问题描述
我目前正在使用 CSS、HTML 和 JQuery 中的滑动按钮.我对 JQuery 有基本的了解，但对 CSS & 非常了解.HTML.不过，我遇到了一个小问题，每当您按下按钮时，它都可以正常工作，但是在页面重新加载时，它会恢复到切换前的状态.我该如何解决这个问题，向任何解决方案开放，最好是客户端?(下面是我的按钮的片段和它旁边的代码)
I am currently working with a sliding button in CSS, HTML, and JQuery. I have a basic understanding of JQuery but an quite knowledgeable in CSS & HTML. I have had a slight problem though, whenever you press the button it works fine, but upon page reload it reverts back to the before toggled state. How might I fix this issue, open to any solution preferably client side? (Below is a snippet of my button and the code alongside it)
$(document).ready(function() {
$('.toggle-menu-lang-cont').click(function() {
$('.handle').toggleClass('slide');
$('.toggle-menu-lang-cont').toggleClass('color-swap');
});
});body {
background-color: black;
}
.toggle-menu-lang-cont {
position: absolute;
top: 2.5vw;
right: 5vw;
max-width: 3.5vw;
width: 3.5vw;
max-height: 1.5vw;
height: 1.5vw;
border-radius: 1vw;
z-index: 5;
background-color: #fff;
transition: all 1s;
transform: scale(1);
}
.handle {
position: absolute;
top: 0.15vw;
right: .25vw;
background-color: #0282E4;
width: 1.25vw;
height: 1.25vw;
border-radius: 100%;
filter: drop-shadow(0vw .15vw .15vw rgb(0, 0, 0, 0.6));
transition: all 1s;
transform: scale(1);
}
.slide {
position: absolute;
right: 2vw;
background-color: white;
transition: all 1s;
}
.color-swap {
background-color: #0282E4;
transition: all 1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Code Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css" <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous">
</script>
</head>
<body>
<section class="toggle-menu-lang-cont">
<div class="toggle-btn"></div>
<div class="handle"></div>
</section>
</body>
</html>推荐答案
基本思想是在切换时利用 LocalStorage.然后将开关的当前状态存储到存储中.当页面加载时，您检查存储键和存储值是否存在.如果该值为真(开关处于活动状态)，请进行适当的调整，以便正确的类就位.如果开关未激活，则什么都不做.
The basic idea is to leverage LocalStorage at the time the switch is engaged. You then store the current state of the switch into storage. When the page loads, you check for both the existence of the storage key and the storage value. If the value is true (the switch is active), make the appropriate adjustments so that the correct classes are in place. If the switch is not activated, do nothing.
$(document).ready(function() {
function toggleHandle() {
$('.handle').toggleClass('slide');
}
if (localStorage.getItem('switch-state') && localStorage.getItem('switch-state') === "true") {
$('.toggle-menu-lang-cont').addClass('color-swap');
toggleHandle();
}
$('.toggle-menu-lang-cont').click(function() {
let el = $('.toggle-menu-lang-cont');
toggleHandle();
el.toggleClass('color-swap');
localStorage.setItem('switch-state', el.hasClass('color-swap'));
});
});
工作示例
这篇关于页面刷新后保持类切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
