ページリロード後に非表示の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

あなたの条件は、ページのリロードそのボタンをクリックした後であるので、私はあなたのコードにボタンを追加することによって開始したいです。 –

あなたはクッキー、またはハッシュ、ウェブストレージ – 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、server-side）で行うことができますが、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を表示する方法は？

答えて

関連する問題