導航到新頁面時，如何使切換開關保持在當前位置？
[英]How can I make my toggle switches stay in their current positions when navigating to new pages?
問題描述
我當前的項目中有兩個切換開關。 一種用於暗/亮模式，另一種用於在移動設備上顯示/隱藏菜單。
我注意到每當用戶刷新頁面、單擊“返回頂部”箭頭或導航到新頁面時，它們都會重置。 這會破壞用戶體驗，所以我想知道如何讓它們一直保持打開或關閉狀態，直到用戶再次點擊它們（或導航離開網站）。
這是它的運行視頻： https : //imgur.com/a/Ww163NA
下面是代碼。 我可以添加或更改什么？
const body = document.getElementById('body'); const darkModeSwitch = document.getElementById('darkModeSwitch'); const menuSwitch = document.getElementById('onOffSwitch'); const mainNavItems = document.getElementById('mainNavItems'); //Show main menu when switch is clicked menuSwitch.addEventListener('click', () => { if (mainNavItems.style.display === 'block') { mainNavItems.style.display = 'none'; } else { mainNavItems.style.display = 'block'; } }); //Dark Mode darkModeSwitch.addEventListener('click', () => { let currentBodyClass = body.className; if (body.className === "lightMode") { body.className = "darkMode"; } else if (currentBodyClass === "darkMode") { body.className = "lightMode"; } });
#mainNav * { color: #FFF; margin: 0; } #mainNav { display: block; text-align: center; padding: 10px; } #mainNavLogo { display: inline-block; margin: 0 auto; padding: 25px 0; font-size: 1.5em; } #mainNavItems { display: none; width: 40%; margin: 0 auto !important; } #mainNavItems div { margin-bottom: 15px; } #mainNavItems h2:hover { color: #db7a3d !important; text-decoration: underline; } #onOffSwitch { position: absolute; right: 20px; top: 20px; } #darkModeSwitch { position: absolute; left: 20px; top: 20px; } body { margin: 0; padding: 0; background: #f3f3f3; } input[type="checkbox"] { position: relative; height: 50px; width: 25px; -webkit-appearance: none; background: #cecece; outline: none; border-radius: 20px; box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.2); transition: .25s; } input:hover { cursor: pointer; } input:checked[type="checkbox"] { background: #db7a3d; } input[type="checkbox"]:before { content: ''; position: absolute; width: 25px; height: 25px; border-radius: 20px; top: 0; left: 0; background: #ffffff; transform: scale(1.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: .35s; } input:checked[type="checkbox"]:before { top: 25px; } /* DARK MODE */ #darkModeSwitch { background: #fff892; } #darkModeSwitch:checked { background: #757575; } #darkModeSwitch:before { background: #fff; } #darkModeSwitch:checked:before { background: #000; }
<body id="body" class="lightMode"> <div class="wrap"> <header> <div id="mainNav"> <input id="darkModeSwitch" type="checkbox" title="Toggle Light/Dark Mode" aria-label="Toggle Light/Dark Mode" /> <input id="onOffSwitch" type="checkbox" title="Show/Hide Menu" aria-label="Toggle Light/Dark Mode" /> <div id="mainNavLogo"><a href="home.html"><h1>Worth it!?</h1></a></div> <div id="mainNavItems"> <div><a href="about.html"><h2>About</h2></a></div> <div><a href="contact.html"><h2>Contact the Developer</h2></a></div> </div> </div> </header> </body>
1 個解決方案
解決方案1
2 2020-02-03 02:09:32
您可以使用localStorage保存暗/亮模式和隱藏/顯示菜單的用戶首選項。 當用戶訪問頁面時，檢查他們的偏好，這樣你就不會一直覆蓋他們的偏好。
localStorage.setItem('mode', 'dark');
localStorage.getItem('mode'); // you get back dark
當出現新單元格時，如何使表格單元格保持在其原始 position 中？
[英]How can I make a table cell stay in its original position when a new cell appears?
如何使我的視圖與控制器中不斷變化的數據保持同步？
[英]How can I make my View stay up to date with the changing data inside of my Controller?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.