Кнопка click Triggers Text Ниже

Question

Я хочу настроить функциональность кнопки, которая заставляет текст появляться под ним при щелчке.

Например, если вы нажмете кнопку «Зарегистрироваться сейчас», появится текст под кнопкой «Вы член, да или нет?».

«Да» и «Нет» будут ссылками, которые приведут вас на другую страницу в зависимости от того, как вы отвечаете.

Мой код кнопки до сих пор (только HTML и укладка делается):

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

Я новичок с такой функциональностью, так что любая помощь будет принята с благодарностью!

Спасибо!

Answer 1

Вы можете использовать функцию onClick, чтобы отобразить текст или элементы под ним.

<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

простой способ:

<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

Как @Pety Хауэлл сказал, вы можете использовать функцию OnClick, чтобы отобразить текст. Вот довольно простой способ сделать это с помощью jQuery.

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

Работа скрипку: https://jsfiddle.net/3gr03yzn/4/

Answer 4

Вы можете использовать JQuery toggle() функцию.

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; 
} 

working example на jsFiddle.

Надеется, что это помогает

Answer 5

Настройте атрибут href, как вы хотите.

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

Попробуйте этот код. проголосуйте, если этот код полезным для вас

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

Большинство ответов, упомянутые здесь, либо использует

1. JQuery или
2. onclick атрибут, который является obtrusive javascript.

Вот как достичь желаемого поведения с помощью ванили, ненавязчивого JavaScript.

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>

Ссылки:

• Document.querySelector()
• HTMLElement.style