使用flipswitch在HTML页面之间切换

Question

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

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

我需要一个功能来实现这一目标吗？

Flipswitch

<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

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

Answer 2

使用此作为您的onclick：

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