Question

您好我一直试图获得隐藏显示功能，并遇到了一个正常工作。对我来说唯一的问题是我希望我的div被隐藏然后显示onclick而不是显示然后隐藏。这是一个示例代码：

   <!DOCTYPE html>
   <html>
   <head>
   <script>

   function hideshow(which){
        if (!document.getElementById)
        return
        if (which.style.display=="none")
            which.style.display="block"
        else
            which.style.display="none"
         }

 </script>
 <style>

  #adiv {
  width: 320px;
  height: 320px;
  background: green;
  }

</style>
</head>

<body>

<a href= "javascript:hideshow(document.getElementById('adiv'));";>clickme!</a>  

<div id="adiv"> </div>

希望这有足够的信息：）

Answer 1

您最初可以通过两种流行方式隐藏div：

（1）使用CSS隐藏

将display:none添加到div以隐藏div是否启用了JS。你可以使用这样的东西：

<div id="adiv" style="display:none"> </div>

（2）隐藏使用JS

如果您不希望为没有启用JS的用户隐藏div，则通过JS隐藏非常有用。有多种方法可以使用自动执行JS来隐藏div。以下是一种简单的方法。

<body onload="hideshow(document.getElementById('adiv'));">

<a href= "javascript:hideshow(document.getElementById('adiv'));";>clickme!</a>  
<div id="adiv"> </div>

Answer 2

我希望我的div被隐藏，然后显示onclick而不是显示然后隐藏

试图理解上面的意思，我无法猜到你在谈论<div>的原始状态。与此同时，我无法想象你不知道如何实现它！

无论如何，如果这确实是个问题，那就非常简单了：将display: none;添加到#adiv规则中。

顺便说一句，您应该更喜欢符合标准的编码风格，以提高可读性，如下所示：

   function hideShow(which){
        if (!document.getElementById) {
            return;
        }
        if (which.style.display == "none") {
            which.style.display = "block";
        } else {
            which.style.display = "none";
        }
    }

最后，你也可以加强它，所以：

   function hideShow(which){
        if (document.getElementById) {
            which.style.display = which.style.display == "none" ?
                "block" : "none";
        }
    }

JavaScript隐藏显示功能

2 个答案: