Как отобразить скрытый 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 или хеш, хранилище в Интернете – Laurianti

Suresh, почему вы не приняли ответ ни на один из ваших вопросов? –

Вы можете установить localStorage элемент, когда пользователь нажимает на кнопку, и на странице лоа 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, вероятно, самый простой.

Этот код на самом деле не запускается здесь, в среде Snacket Stack Overflow из-за песочницы, но вы можете видеть его рабочую версию 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 после перезагрузки страницы?

ответ

Смежные вопросы