Wie stellen Sie den Absatz so ein, dass er angezeigt wird, nachdem auf eine Schaltfläche geklickt wurde?

-2

Wenn eine Person einen Absatz mit Text erstellt hat, aber er möchte nur, dass sie angezeigt wird, wenn die Person auf die Schaltfläche geklickt hat.Wie stellen Sie den Absatz so ein, dass er angezeigt wird, nachdem auf eine Schaltfläche geklickt wurde?

Ich habe meine Schaltfläche und Absatz erstellt, aber der Absatz kommt immer auf dem Browser auf, auch ohne dass ich auf die Schaltfläche klicke. Wie "verstecke" ich den Absatz innerhalb der BTN, bis er geklickt wurde?

#Belfastbutton { 
 
    position: absolute; 
 
    color: green; 
 
    top: 310px; 
 
    left: 130px; 
 
    height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="Belfastbutton">Click for Details</button> 
 
<p id=Belfastcontactdetails>34 Boucher Road, Belfast. <br>Co.Antrim<br>BT27</p>

Quelle

2017-02-28 matty

bitte JavaScript teilen, damit wir helfen können. – caisah

$ (document) .ready (function() { \t $ ('# Belfastcontactdetails'.hide (function() { \t}); $ (document) .ready (function() { \t $ (' # Belfastcontactdetails'.show (function() { \t}); }); – matty

Fügen Sie Ihrem css hinzu: '#Belfastcontactdetails {display: none}' fügen Sie einige jquery '$ (function() {$ (" # Belfastbutton ") .click (function() {$ ("# Belfastcontactdetails"). fadeIn();})}); ' –

Der einfachste Weg, um dies zu realisieren ist es, den Absatz von Standard zu verbergen, und dann den Absatz zeigen, wenn die Schaltfläche geklickt wird:

<button id="Belfastbutton" onclick="showDetails()">Click for Details</button> 

#Belfastcontactdetails { 
    display: none; 
} 

function showDetails() { 
    document.getElementById("Belfastcontactdetails").style.display = 'block'; 
}

Beachten Sie auch, dass Ihr Absatz muss die ID in Anführungszeichen setzen, damit beide korrekt validieren und das JavaScript auslösen:

<p id="Belfastcontactdetails">

Ich habe eine funktionierende Geige dieser here erstellt.

Hoffe, das hilft! :)

Quelle

2017-02-28 21:10:06

Setzen Sie Ihre auf display:none in CSS.

Verwenden Sie .fadeIn(), um die Schaltfläche p on button anzuzeigen.

$('button').click(function() { 
 
    
 
    $('p').fadeIn(); 
 
    
 
});

#Belfastbutton { 
 
    color: green; 
 
    height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
} 
 

 
#Belfastcontactdetails { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="Belfastbutton">Click</button> 
 
<p id=Belfastcontactdetails>text</p> 
 
</div>

Quelle

2017-02-28 21:13:18 James

Wenn ich gut verstehen, für das Sie suchen.

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script> 
 
     $(document).ready(function() { 
 
      $("#btn1").click(function() { 
 
       $("p").append(" <b>Tekst you want to show after button click</b>."); 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <p></p> 
 
    <button id="btn1">Show tekst</button> 
 
</body> 
 
</html>

Quelle

2017-02-28 21:16:34

Wie stellen Sie den Absatz so ein, dass er angezeigt wird, nachdem auf eine Schaltfläche geklickt wurde?

Antwort

Verwandte Themen