Javascript 使用Cookie保存JQuery切换状态
我有一个iFrame,可以通过单击按钮来切换可见或隐藏。我正在使用JQuery.toggle函数来实现这一点。当前,默认情况下通过CSS:style=“display:none”隐藏该区域的div 一个新的要求是保存用户最近的显示或隐藏(选择的切换状态)以供下一页加载,因此,如果用户上次在主页上选择显示iFrame,则下次访问iFrame时默认可见。我想用cookie设置上次选择的切换状态,但无法使其工作。下面是我的代码:Javascript 使用Cookie保存JQuery切换状态,javascript,jquery,html,css,cookies,Javascript,Jquery,Html,Css,Cookies,我有一个iFrame,可以通过单击按钮来切换可见或隐藏。我正在使用JQuery.toggle函数来实现这一点。当前,默认情况下通过CSS:style=“display:none”隐藏该区域的div 一个新的要求是保存用户最近的显示或隐藏(选择的切换状态)以供下一页加载,因此,如果用户上次在主页上选择显示iFrame,则下次访问iFrame时默认可见。我想用cookie设置上次选择的切换状态,但无法使其工作。下面是我的代码: <meta charset="utf-8"> <tit
<meta charset="utf-8">
<title>drop demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
.button {
padding-top: 10px;
padding-right: 20px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<button type="button" id="button"
title="Personalized Sales Dashboard">Show/Hide</button>
<div id="toggle" style="display:none" frameborder="2">
<iframe src="https://sample.com"="" id="myfr" scrolling="no" frameborder="0"
height="800px" width="100%">Your Browser Do not Support Iframe</iframe>
</div>
<script>
$("#button").click(function () {
$("#toggle").toggle("blind");
});
$(function () {
$("#button").tooltip();
});
</script>
投递演示
#拨动{
宽度:100px;
高度:100px;
背景:#ccc;
}
.按钮{
填充顶部:10px;
右边填充:20px;
}
显示/隐藏
您的浏览器不支持Iframe
$(“#按钮”)。单击(函数(){
$(“切换”)。切换(“盲”);
});
$(函数(){
$(“#按钮”).tooltip();
});
在按钮上设置cookie单击div是否可见:
document.cookie = "toggleState=" + $("#toggle").is(':visible');
并在页面加载时检索,相应地显示或隐藏内容:
var toggleState = document.cookie.replace(/(?:(?:^|.*;\s*)toggleState\s*\=\s*([^;]*).*$)|^.*$/, "$1");
if (toggleState == 'true') {
$("#toggle").show();
}
else {
$("#toggle").hide();
}