javascript - 使用 Flipswitch 在 HTML 页面之间切换

Question

我有两个独立的 html 页面，我希望使用翻转开关进行切换。

开关默认为“关闭”，并显示当前 html 页面 index.html。当用户将其翻转为“打开”时，我想将它们重定向到 nextpage.html。同样，如果用户将其“关闭”，他们将被重定向到 index.html。我尝试在代码中包含 onclick="index.html" 进行实验，但它不起作用。

我需要一个函数来实现这个吗？

翻转开关

<div class= "switch">
   <label for="title"><b>Switch to redirect:</b>
   <input type="checkbox" data-role="flipswitch" name="switch" id="switch"></label>
</div>

Answer 1

由于它是一个复选框，因此您可以添加EventListener onchange:

HTML:(index.html)

<div class= "switch">
 <label for="title"><b>Switch to redirect:</b>
   <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
 </label>
</div>

HTML:(nextpage.html)

<div class= "switch">
 <label for="title"><b>Switch to redirect:</b>
   <input type="checkbox" checked="checked" data-role="flipswitch" name="switch" id="switch">
 </label>
</div>

JavaScript:

document.getElementById('switch').onchange = function(){
  if(this.checked){
   window.location='nextpage.html';
  } else {
   window.location='index.html';
  }
};