按鈕單擊觸發下面的文本

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

上的jsfiddle的working example。

希望這有助於你想要

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