如何在页面重新加载后显示隐藏的div？

-1

我有一个要求，当点击一个按钮时，页面需要重新加载。重新加载后，我需要显示隐藏的div。如何在页面重新加载后显示隐藏的div？

下面是我的要求，它描述了我的问题？

1.在我的html代码中包含一些带有按钮的文本，并且在此页面中只有默认情况下我隐藏了一些文本div 2.当点击按钮时，我正在重新加载页面。显示隐藏的div

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script> 
 
     $(document).ready(function(){ 
 
     $("#test2").css("visibility","hidden"); 
 
     alert("reloaded"); 
 

 
     $("#p1").click(function(){ 
 

 
      setTimeout(function(e){ 
 
      alert("inside time out"); 
 
      $("#p2").css("visibility","visible"); 
 
      },3000); 
 
      location.reload(); 
 

 
     });  
 
     }); 
 
    </script> 
 
    </head> 
 
    <body> 
 

 
    <div id="myDiv"> 
 
     <p id="p1">This is sample text</p> 
 
    </div> 
 

 
    <div id="test2"> 
 

 
     <p id="p2">this is invisible text</p> 
 
    </div> 
 

 
    </body> 
 
</html>

在此先感谢

来源

2017-02-09 suresh

我会通过添加按钮，你的代码，因为你的要求是启动按钮，点击后页面重新加载。 –

您可以使用cookie或hash，网络存储 – Laurianti

Suresh，为什么你没有接受任何问题的答案？ –

可以当用户点击该按钮设置localStorage项目，并在页面LOA d查找localStorage项目并有条件地显示隐藏的div。

var $hidden = $('.hidden'); 
 

 
localStorage.getItem('show') && $hidden.show(); 
 

 
$('button').on('click',function() { 
 
    localStorage.setItem('show',true); 
 
    window.location.reload(false); 
 
})

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hidden">hidden</div> 
 
<button>click</button>

来源

2017-02-09 17:19:15

首先，如果你的要求是已经被点击一个按钮，你需要一个按钮，而不是一个段落。

接下来，代替visibility属性（即使在未显示元素的情况下仍然在元素的页面上分配空间），请使用display（不会）。

最重要的是，如果您重新加载文档，那么您拥有的任何局部变量将会丢失。您需要在页面加载之间持续某种“标志”。这可以通过多种方式完成（cookie，sessionStorage，localStorage，服务器端），但localStorage可能是最简单的。

此代码实际上不会在堆栈溢出片段的环境中运行，在这里由于沙盒，但你可以看到它的here工作版本。

查看其它评论在线：

$(document).ready(function(){ 
 

 
     // Check to see if this is a page reload or not by seeing if a value was placed 
 
     // into localStorage from a previous page load 
 
     if(localStorage.getItem("loadedEarlier")){ 
 
      // Page has already loaded earlier 
 
      $("#test2").css("display","block"); 
 
     } 
 
     
 
     $("#btn").click(function(){ 
 
      location.reload(); 
 
     });  
 
     
 
     // Place a value into localStorage 
 
     localStorage.setItem("loadedEarlier", "yes")   
 
});

/* No need for JavaScript to initially hide the element which 
 
    can cause the usre to see it momentarially before the JS runs. 
 
    Set its default display to none instead.      */ 
 
#test2 { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btn">Click to Reload</button> 
 
<div id="test2"><p id="p2">this is invisible text</p></div>

来源

2017-02-09 17:30:01

如何在页面重新加载后显示隐藏的div？

回答

相关问题