javascript - 按钮单击触发下面的文本

Question

我想为按钮设置一个功能，使文本在点击时显示在按钮下方。

例如，当您点击显示“立即注册”的按钮时，文本将显示在显示“您是成员(member)，是还是否？”的按钮下方。

"is"和“否”是根据您的回答方式将您带到不同页面的链接。

到目前为止我的按钮代码(只完成了 html 和样式):

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

我是这种功能的新手，所以非常感谢任何帮助!

谢谢!

Answer 1

根据需要调整 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>