功能 - 仅在单击后显示按钮?

时间:2012-04-12 11:48:50

标签: javascript html css function prompt

我对功能和学习JavaScript都不擅长,我需要帮助我学习它的一个例子。我有个问题。我该怎么做才能使下一个按钮只在单击它之前显示? (例如,如果不先点击Google,就无法看到Yahoo按钮)以下是代码:

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Your Name");
if (name!=null && name!="")
  {
  alert("Thanks for clicking! You will now be redirected to Google.com");
  window.open("http://www.google.com/"};
}
</script>
<script type="text/javascript">
function show_alert()
{
alert("Thanks for clicking me! You are now going to Yahoo.com!");
window.open("http://www.yahoo.com");
}
</script>
<script type="text/javascript">
function show_alert1()
{
alert("Thanks for clicking. Have fun on facebook!");
window.open("http://www.facebook.com/");
}
</script>
</head>
<body>
<ul>
<li><input type="button" onclick="show_prompt()" value="Google" />
<li><input type="button" onclick="show_alert()" value="Yahoo" />
<li><input type="button" onclick="show_alert1()" value="Facebook" />
</ul>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

给按钮id,然后将它们的css显示属性设置为none,使它们不可见(并且不占用任何空间)。

<ul> 
  <li><input type="button" onclick="show_prompt();showNext('btnYahoo')" value="Google" /></li> 
  <li><input type="button" id="btnYahoo" onclick="show_alert();showNext('btnFacebook')" value="Yahoo" style="display:none" /></li>
  <li><input type="button" id="btnFacebook" onclick="show_alert1()" value="Facebook" style="display:none" /></li> 
</ul>

函数showNext然后显示传递给函数的ID的按钮。调用函数时见上文我传入“btnYahoo”或“btnFacebook”,具体取决于我接下来要显示的那个。

function showNext(showThis){

  document.getElementById(showThis).style.display = "block";

}

希望有所帮助