Schaltfläche Klick Triggers Text unter

Question

Ich möchte eine Funktionalität für eine Schaltfläche einrichten, die beim Klicken darauf Text darunter erscheinen lässt.

Wenn Sie zum Beispiel auf eine Schaltfläche klicken, die "Jetzt anmelden" anzeigt, wird der Text unter der Schaltfläche "Sind Sie Mitglied, ja oder nein?" Angezeigt.

"Ja" und "Nein" wären Links, die Sie auf eine andere Seite bringen, je nachdem, wie Sie antworten.

bisher My Button-Code (nur html und Styling getan):

<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up 
Now</a> 

Ich bin neu mit dieser Art von Funktionalität so dass jede Hilfe wäre sehr dankbar!

Danke!

Answer 1

Mit der Funktion onClick können Sie Text oder Elemente darunter einblenden.

<a href="/ticket-link" onClick='document.getElementById("text").style.display="initial";' target="_blank" class="ticket-button">Sign Up Now</a> 
<span style="display:none;" id="text">This is some text :D</span> 

Answer 2

einfache Art und Weise:

<a href="/ticket-link" target="_blank" class="ticket-button" onclick="confirmSignup()">Sign Up Now</a> 

<script> 
function confirmSignup(){ 
    if(confirm("Are you sure?")) 
    { 
    window.location.href="http://somelocation.com/sign-up"; 
    } 
} 
</script> 

Answer 3

Wie @Pety Howell sagte, können Sie die onClick Funktion den Text sichtbar machen. Hier ist eine ziemlich einfache Möglichkeit, es mit jQuery zu tun.

$(function() { 
 
\t \t \t $('.link').on('click', function() { 
 
\t \t \t \t $('.span').addClass('open'); 
 
     }); 
 
});

.span { 
 
    display: none; 
 
} 
 
.open { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" class="link">Click me</a> 
 
<span class="span">I'm hidden!</span>

Arbeits Geige: https://jsfiddle.net/3gr03yzn/4/

Answer 4

könnten Sie jQuery toggle()-Funktion verwenden.

HTML:

<button id="member"> 
Are you Member ? 
</button> 

<div class="answer"> 
<a href="#">Yes</a><br /> 
<a href="#">No</a> 
</div> 

JS:

$("#member").click(function() { 
    $(".answer").toggle(); 
}); 

CSS:

.answer { 
    display:none; 
} 

Die working example auf jsFiddle.

this helps

Answer 5

Passen Sie die href Attribut, wie Sie wollen.

$('#btn').click(function() { 
 
    $('#modal').fadeIn(); 
 
});

a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #333; 
 
    width: 100px; 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
    margin: 0 auto; 
 
} 
 

 
#modal { 
 
    width: 300px; 
 
    height: 120px; 
 
    background-color: #ccc; 
 
    border-radius: 5px; 
 
    margin: 0 auto; 
 
    display: none; 
 
} 
 

 
#modal h3 { 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 

 
#modal a { 
 
    width: 50px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    height: 10px; 
 
    vertical-align: middle; 
 
    line-height: 10px; 
 
} 
 

 
.btns { 
 
    width: 200px; 
 
    margin: auto; 
 
} 
 

 
a:hover { 
 
    background-color: #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a> 
 

 
<div id='modal'> 
 
    <h3>Are you a member?</h3> 
 
    <div class='btns'> 
 
    <a href="/ticket-link" target="_blank" class="ticket-button">Yes</a> 
 
    <a href="/ticket-link" target="_blank" class="ticket-button">No</a> 
 
    </div> 
 
</div>

Answer 6

diesen Code Versuchen. bitte, wenn dieser Code für Sie hilfreich stimmen

function execute(){ 
 
     var x = document.getElementById('link_list'); 
 
     var y =document.getElementById('btn'); 
 
     if(x.style.visibility==="hidden"){ 
 
      y.style.visibility="hidden"; 
 
      x.style.visibility="visible"; 
 
     } 
 
    }

<button onclick="execute()" id="btn">sign up</button> 
 
<div id="link_list" style="visibility:hidden"> 
 
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button>&nbsp;or &nbsp;<button onclick="window.open('google.com')">no</button> 
 
    </div>

Answer 7

Die meisten Antworten erwähnt hier entweder verwendet

1. jQuery oder
2. onclick Attribut, das obtrusive javascript ist. mit Vanille, unaufdringlich JavaScript

Hier ist, wie das gewünschte Verhalten zu erreichen.

window.onload = function() { 
 
    var button = document.querySelector('.ticket-button'); 
 
    var info = document.querySelector('.info'); 
 

 
    info.style.display = 'none'; 
 
    var dispalyInfo = false; 
 

 
    button.onclick = function(e) { 
 
    e.preventDefault(); /* prevent page from navigating to a new page onclick */ 
 
    if (dispalyInfo) { 
 
     info.style.display = 'none'; 
 
     dispalyInfo = false; 
 
    } else { 
 
     info.style.display = 'initial'; 
 
     dispalyInfo = true; 
 
    } 
 
    } 
 
}

.ticket-button { 
 
    display: block; 
 
}

<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up Now</a> 
 
<span class="info">Are you a member, <a href="#">yes</a> or <a href="#">no</a>?</span>

Referenzen:

• Document.querySelector()
• HTMLElement.style