切換顯示將隱藏的元素顯示一秒鍾

Question

我試圖在單擊按鈕時顯示隱藏的文本。 但是，當我加載頁面時，文本會顯示一秒鍾，然后消失。 為什么會這樣？

<div class="container">
  <p class="temp">This is temporary</p>
  <button id="showme">Show</button>
</div>

$(document).ready(function() {
  $(".temp").hide();
  $("#showme").on("click", function() {
    $(".temp").show();
  });
});

Answer 1

嘗試了解網頁的加載方式。 當整個頁面使用關聯的CSS呈現時，將執行您的jquery。 因此，瀏覽器將顯示您的文本一秒鍾，直到執行jquery隱藏該文本為止。 因此，您的瀏覽器需要知道在解析html時此文本是隱藏的。 您可以通過為文本提供CSS樣式來做到這一點。

CSS：

.temp {
  display: none;
}

HTML：

<div class="container">
  <p class="temp">This is temporary</p>
  <button id="showme">Show</button>
</div>

JS：

$(document).ready(function() {
  $("#showme").on("click", function() {
    $(".temp").show();
  });
});

Answer 2

您應該在<p>標記中使用內聯樣式標記，如下所示：

<p class="temp" style="display: none;">This is temporary</p>

而不是將其隱藏在jQuery中！

 $(document).ready(function() { $("#showme").on("click", function() { $(".temp").show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <p class="temp" style="display: none;">This is temporary</p> <button id="showme">Show</button> </div>