我目前正在使用 CSS、HTML 和 JQuery 制作滑动按钮。我对 JQuery 有基本的了解，但对 CSS 和 HTML 也很了解。不过，我遇到了一个小问题，每当您按下按钮时它都可以正常工作，但是在页面重新加载时它会恢复到切换之前的状态。我如何解决这个问题，向任何解决方案(最好是客户端)开放？ (下面是我的按钮的片段及其旁边的代码)
$(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。然后将交换机的当前状态存储到存储器中。当页面加载时，您检查存储键和存储值是否存在。如果该值为 true(开关处于事件状态)，请进行适当的调整，以便正确的类就位。如果开关未激活，则不执行任何操作。
$(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'));
});
});
工作示例
关于jquery - 页面刷新后保持类切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55819969/