为什么我的按钮不会隐藏?(JavaScript Functions/CSS Visibility）

Why won't my buttons hide? (JavaScript Functions/CSS Visibility)

本文关键字：Functions JavaScript CSS Visibility 按钮 我的 隐藏 为什么      更新时间：2023-09-26

我真的不明白这个。我试图在我的 JavaScript 示例中隐藏带有 CSS 的三个按钮，但什么也没发生！为什么李二和三不躲？我想使 li.two 和 li.three 在单击它们的按钮之前不可见。（雅虎仅在谷歌被点击时可见，Facebook只有在雅虎被点击时才可见）代码如下：

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Your Name");
if (name!=null && name!="")
  {
  alert("Thanks for clicking " + name + "!");
  window.open("http://www.google.com/};
}
</script>
<script type="text/javascript">
function show_alert()
{
alert("Thanks for clicking me!");
window.open("http://www.yahoo.com/");
}
</script>
<script type="text/javascript">
function show_alert1()
{
alert("Have fun on Facebook!");
window.open("http://www.facebook.com/");
}
</script>
<script type="css/text">
li.two, li.three {display:none};
</script>
</head>
<body>
<ul>
<li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" />
<li class="two"><input type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" />
<li class="three"><input type="button" id="Facebook" onclick="show_alert1()"value="Facebook" />
</ul>
</body>
</html>

<li>上没有结束标记 

<li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" /></li>
<li class="two"><input type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" /></li>
<li class="three"><input type="button" id="Facebook" onclick="show_alert1()"value="Facebook" /></li>

你的CSS是错误的，;在{}之外

li.two, li.three {display:none;}

你的 css 在一个<script>标签中，需要在里面：

<style type="text/css">li.two, li.three {display:none;}</style>

你需要使用这个

<li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" />
<li class="two"><input type="hidden" type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" />
<li class="three"><input type="hidden" type="button" id="Facebook" onclick="show_alert1()"value="Facebook" />

你没有关闭li标签，你的showNext（）函数只调用，没有写那个函数

试试这个 

        <html>
        <head>
        <style type="text/css">
        .two,.three{
        display:none;
        }
        </style>

        <script type="text/javascript">
        function show_prompt()
        {
        var name=prompt("Your Name");
        if (name!=null && name!="")
          {
          alert("Thanks for clicking " + name + "!");
          window.open("http://www.google.com/")
          };
        }
        </script>
        <script type="text/javascript">
        function showNext(value){
        document.getElementById(value).style.display="block";


        }
        </script>
        <script type="text/javascript">
        function show_alert()
        {
        alert("Thanks for clicking me!");
        window.open("http://www.yahoo.com/");
        }
        </script>
        <script type="text/javascript">
        function show_alert1()
        {
        alert("Have fun on Facebook!");
        window.open("http://www.facebook.com/");
        }
        </script>
        </head>
        <body>
        <ul>
        <li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" /></li>
        <li class="two" id="Yahoo" ><input type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" /></li>
        <li class="three" id="Facebook"><input type="button" id="Facebook" onclick="show_alert1()"value="Facebook" /></li>
        </ul>
        </body>
        </html>
相关文章：