Question

我试图找出如何在网页重新加载后保留按钮点击状态。在我的代码中，我使用onclick事件，所以如果我需要添加另一个我能够这样做...只是想弄清楚如何保持点击状态。感谢任何时候帮助，谢谢。

<html>
<head>

<style type="text/css">
#sub3 {
position: absolute;
left: 100px;
top: 200px;
background-color: #f1f1f1;
width: 180px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

</head>
<body >

<input id="input1" type=button value='Show Layer' onclick="setVisibility('sub3', 'inline');";>

<div id="sub3">Message Box</div>

</body>
</html>

Answer 1

有一个用于设置cookie的javascript函数使用这些代码段设置和获取Cookie值

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

这两个函数都来自w3schools tutorials

Answer 2

由于JavaScript是客户端，因此每次刷新页面时都会丢失用户点击事件等信息。

假设您需要刷新页面并且无法使用Ajax的特定原因，您可以通过单击设置cookie来完成所需的操作，然后检查是否在下一页上单击了该cookie负荷。

This is a good primer for setting/retrieving cookies in JavaScript。如果您愿意，还有一个很好的Jquery plugin。

基本上，在onclick调用中，您将调用一个函数，该函数使用值设置cookie并执行setVisiblity函数。

function clicked(id, visibility) {
    setVisibility(id, visibility);
    setCookie() // this calls your set cookie function
    return true;
}

在页面加载时，您将拥有一个函数，用于检查您刚刚设置的cookie是否存在。如果是，则可以再次调用setVisibility函数来更改按钮的样式。

单击一次并重新加载页面后，如何保留单击按钮的状态？

2 个答案: