使用翻转开关在 HTML 个页面之间切换

Question

我有两个单独的 html 页面，我想使用翻转开关来切换它们。

开关默认为"Off"，显示当前html页，index.html。当用户将其翻转到 "On" 时，我想将它们重定向到 nextpage.html。同样，如果用户翻转 "Off"，他们将被重定向到 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

将此用作您的点击：

onclick="window.location='index.html'"

Answer 2

由于它是一个复选框，您可以添加 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';
  }
};

使用翻转开关在 HTML 个页面之间切换

Toggle between HTML pages using flipswitch

html

javascript

eclipse