Question

我想为按钮设置一项功能，以便在点击时让文字显示在其下方。

例如，当您点击“立即注册”按钮时，文本会显示在“您是会员，是或否？”的按钮下方。

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

到目前为止我的按钮代码（只是html和样式完成）：

setBounds(int x, int y, int width, int height)

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

谢谢！

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>

Answer 2

您可以使用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 3

简单的方法：

<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 4

就像@Pety Howell所说，你可以使用onClick功能取消隐藏文本。这是使用jQuery实现它的一种非常简单的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

工作小提琴：https://jsfiddle.net/3gr03yzn/4/

Answer 5

您可以使用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 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

这里提到的大多数答案都使用

jQuery或，
onclick属性为obtrusive javascript。

以下是如何使用 vanilla ，不显眼的 JavaScript实现所需的行为。

＆＃13;

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

＆＃13;

.ticket-button {
  display: block;
}

＆＃13;

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

＆＃13;

参考文献：

按钮单击触发下面的文本

7 个答案: