Wie wird das versteckte div nach dem erneuten Laden der Seite angezeigt?

-1

Ich habe eine Anforderung, dass beim Klicken auf eine Schaltfläche die Seite neu geladen werden muss. Nach dem Neuladen muss ich das versteckte div anzeigen.Wie wird das versteckte div nach dem erneuten Laden der Seite angezeigt?

unten ist meine Anforderung, die mein Problem beschreiben?

1.In meinem HTML-Code bestehen aus etwas Text zusammen mit Button und auf dieser Seite nur standardmäßig ich verberge einige Text div 2.Wenn Sie auf die Schaltfläche klicken ich die Seite neu laden .nach dem Laden der Seite ich will versteckte 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>

Vielen Dank im Voraus

Quelle

2017-02-09 suresh

ich durch das Hinzufügen einer Schaltfläche, um Ihren Code beginnen würde, da Ihre Anforderung, dass die Seite neu geladen nach dem Klick auf eine Schaltfläche ist. –

Sie können Cookie oder Hash, Web-Speicher verwenden – Laurianti

Suresh, warum haben Sie keine Antwort auf Ihre Fragen akzeptiert? –

können Sie ein localStorage Element gesetzt, wenn ein Benutzer auf die Schaltfläche klickt, und auf Seite loa d nach dem localStorage Artikel suchen und bedingt das versteckte div anzeigen.

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>

Quelle

2017-02-09 17:19:15

Erstens, wenn Ihre Anforderung auf eine Schaltfläche geklickt hat, ist sein, werden Sie auf eine Schaltfläche benötigen, keinen Absatz.

Als nächstes wird anstelle der visibility -Eigenschaft (die immer noch Speicherplatz auf der Seite für das Element reserviert, auch wenn es nicht angezeigt wird) display (was nicht verwendet wird).

Am wichtigsten ist, wenn Sie das Dokument neu laden, dann sind alle lokalen Variablen, die Sie haben, verloren. Sie müssen eine Art "Flag" zwischen Seitenladungen beibehalten. Dies kann auf verschiedene Arten geschehen (Cookies, sessionStorage, localStorage, serverseitig), aber localStorage ist wahrscheinlich die einfachste.

Dieser Code wird nicht tatsächlich ausgeführt, hier in der Stack Overflow-Snippetumgebung aufgrund von Sandboxing, aber Sie können eine funktionierende Version davon sehen.

Weitere Kommentare inline:

$(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>

Quelle

2017-02-09 17:30:01

Wie wird das versteckte div nach dem erneuten Laden der Seite angezeigt?

Antwort

Verwandte Themen