使用flipswitch在HTML页面之间切换

Question

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

开关是＆＃34;关＆＃34;默认情况下，显示当前的html页面index.html。当用户将其翻转到＆＃34; On＆＃34;时，我想将它们重定向到nextpage.html。同样，如果用户将其翻转＆＃34;关闭＆＃34;，则会将其重定向到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

由于它是一个复选框，您可以添加事件管理器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：

<form>
  <input label="Your name" pattern='^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$' required error-message="Please enter VALUE">
  <input type="submit" value="Submit">
</form>