Jquery HTML切换开关状态
我有一个由两部分组成的问题 第1部分:在下面的html文件中,我有一个切换开关,希望保存的状态,所以当我返回页面时,它的位置就是我离开页面的方式 更新: 第2页现在处于保存状态 页面2.htmlJquery HTML切换开关状态,jquery,css,html,Jquery,Css,Html,我有一个由两部分组成的问题 第1部分:在下面的html文件中,我有一个切换开关,希望保存的状态,所以当我返回页面时,它的位置就是我离开页面的方式 更新: 第2页现在处于保存状态 页面2.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>page 2</title> <style> .switch { position: relat
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>page 2</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: green;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: red;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<script>
function save(){
var checkbox = document.getElementById('stus');
localStorage.setItem('stus', checkbox.checked);
}
function load(){
var checked = JSON.parse(localStorage.getItem('stus'));
document.getElementById("stus").checked = checked;
}
function del(){
location.reload();
localStorage.clear()
}
load();
</script>
<body onload="load()"> <input type="button" id="ReserveerButton1" value="save" onclick="save()"/>
<input type="button" id="Wisbutton1" value="delete" onclick="del()"/>
<h2>status</h2>
<label class="switch">
<input type="checkbox" id="stus">
<div class="slider round"></div>
</label>
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</body>
</html>
第2页
.开关{
位置:相对位置;
显示:内联块;
宽度:60px;
高度:34px;
}
.开关输入{显示:无;}
.滑块{
位置:绝对位置;
光标:指针;
排名:0;
左:0;
右:0;
底部:0;
背景颜色:绿色;
-webkit转换:.4s;
过渡:.4s;
}
.滑块:之前{
位置:绝对位置;
内容:“;
高度:26px;
宽度:26px;
左:4px;
底部:4px;
背景色:白色;
-webkit转换:.4s;
过渡:.4s;
}
输入:选中+滑块{
背景色:红色;
}
输入:焦点+.滑块{
盒影:0 0 1px#2196F3;
}
输入:选中+。滑块:之前{
-webkit转换:translateX(26px);
-ms变换:translateX(26px);
转化:translateX(26px);
}
/*圆形滑块*/
.圆滑{
边界半径:34px;
}
.滑块.圆形:之前{
边界半径:50%;
}
函数save(){
var checkbox=document.getElementById('stus');
setItem('stus',checkbox.checked);
}
函数加载(){
var checked=JSON.parse(localStorage.getItem('stus');
document.getElementById(“stus”).checked=checked;
}
函数del(){
location.reload();
localStorage.clear()
}
加载();
地位
第2部分:现在page2.html保持它的保存状态,我可以在page1.html上获得相同的状态
第1.html页
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#stat').load('bw14.html' '#status')
}
</script>
</head>
<body>
<a href="page2.html" >Page2</a><label>Status: </label><div id="stat"></div>
</body>
</html>
测试项目
jQuery(函数($){
$('#stat').load('bw14.html'#status'))
}
地位:
要保留复选框状态的记录,您必须查看Cookie或本地存储
要获取复选框的状态,请使用:
$('.switch input').is(":checked")
对于静态网站,我只能想到
HTML5 localStorage
或Cookie来跟踪和记住信息。你有没有研究过这两种工具?localStorage
将是这两个问题的答案。现在localStorage工作了吗?有人可以帮助完成第2部分吗?