撥動開關保持最后狀態，即使重新加載
我用的是W3schools的撥動開關(這個)。在W3schools編輯器中，它返回到它的既定& quot選中& quot或者& quot未選中& quot位置上重新裝彈，但不管什么原因——如果我& quot檢查& quot我的，然后重新加載，它保持選中，或者如果我取消選中它，然后重新加載，它保持未選中。
對于我正在做的項目來說，在最初加載/任何重新加載/重新訪問時不檢查它是很重要的。
我很好奇這是不是某種緩存問題，因為我是在我的本地電腦上處理這個問題的(寫字板用于編輯html，firefox用于查看文件),但是我把我的工作上傳到neocities，問題仍然存在，所以我認為這意味著是代碼本身的問題。
<head>
<style>
.selector {
background-color:rgba(255, 255, 0, 0.3);
text-align:center;
border:1px solid gold;
width: 50vw;
max-width:500px;
border-radius:2em;
padding:1em;
font-size:20px;
color:gold;
margin:2em auto auto;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: darkblue;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: gold;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: cornflowerblue;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body>
<div class="selector">Unchecked
<label class="switch">
<input type="checkbox" onclick="hoverFunction()">
<span class="slider" alt="toggle switch button"></span>
</label>
Checked</div>
</body>我該如何解決這個問題？
這是火狐造成的。如果添加標志autocomplete = & quot關閉& quot它應該可以防止這種行為，您可以使用& quot選中& quot或者& quot未選中& quot旗幟。
例如:
& lt輸入類型= & quot復選框& quotonclick = & quothover function()& quot；autocomplete = & quot關閉& quot未選中& gt
或者:
& lt輸入類型= & quot復選框& quotonclick = & quothover function()& quot；autocomplete = & quot關閉& quot選中& gt
上一篇如何處理網站中的窗口縮放
下一篇如何使圖像輪廓可選