切换可见性-显示/隐藏-切换时保持显示状态

Toggle Visibility - Show/Hide - Remain shown when toggled

本文关键字：显示 状态 可见性 隐藏      更新时间：2023-09-26

我有这段代码，它工作得很好，但如果在刷新页面时单击，我希望div保持打开状态。例如，用户查看链接，然后返回到上一页。链接是一个图像，页面（div）是图像菜单。

<div id="block1-1">
    <a name="works"></a>
    <a href="#block1-1" onclick="toggle_visibility('block1-1');"><h2>works</h2></a>
</div>
<script type="text/javascript">
   function toggle_visibility(id){
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }
</script>

本地存储可能是最简单的解决方案（仅适用于某些浏览器）。

修改您的功能以包含本地存储代码：

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block'){
      e.style.display = 'none';
      localStorage.setItem("show", false);
    }
    else{
      e.style.display = 'block';
      localStorage.setItem("show", true);
      localStorage.setItem("id", e);
    }
    };

然后你需要加入这个：

window.onload=function(){
  if(localStorage.getItem("show")){
    var e = localStorage.getItem("id");
    e = document.getElementById("e");
    e.style.display = 'block';
  }
}

您必须为div 指定display样式

<div id="block1-1" style="display:block;">
相关文章：