Toggle-Display zeigt das versteckte Element für eine Sekunde

Question

Ich versuche, einen versteckten Text auf Knopfdruck zu zeigen. Aber wenn ich die Seite lade, wird der Text für eine Sekunde angezeigt und verschwindet dann. Warum sollte das passieren?

<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

Versuchen Sie zu verstehen, wie die Webseite geladen wird. Ihre jquery wird ausgeführt, wenn die gesamte Seite mit dem zugehörigen CSS gerendert wird. So zeigt der Browser Ihren Text für eine Sekunde an, bis er jquery ausführt, um diesen Text auszublenden. Ihr Browser muss also wissen, dass dieser Text beim Parsen des HTML-Codes ausgeblendet ist. Sie können dies tun, indem Sie dem Text einen CSS-Stil zuweisen.

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

sollten Sie Inline-Stil-Tag wie folgt in <p>-Tag verwenden:

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

anstatt es von jQuery zu verstecken!

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