Question

我的页面需要隐藏除第一个元素之外的所有元素。然而，第一个元素仍然被隐藏，尽管我有JS告诉它显示。

该代码在此页面上正常运行： https://www.dinnerthyme.com/yo-join.aspx 因为显示了第一个div（即使有内联css说“display：none”）

但是对于此测试页面，它不显示任何元素。如果我删除内联CSS说“display：none;”当然它会显示第一个元素，但后来我无法确定JS的其余部分是否正常工作。我从这个代码块开始进行测试。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<body>

      <script type="text/javascript">
    function pageLoad() {


        document.getElementById("one").style.display = "";
        document.getElementById("two").style.display = "none";
        document.getElementById("three").style.display = "none";
    }       

</script>


  <div>
    <div>
     <div>     
     <h1> Junk </h1>
        <p>stuff </p>


         <div id="one" style="display:none;">    <p>hjdshfjshjshjsdjfskfsdkjf</p></div>
         <div id="two" style="display:none;">    <p>hjdshfjshjshjsdjfskfsdkjf</p></div>
         <div id="three" style="display:none;">    <p>hjdshfjshjshjsdjfskfsdkjf</p></div>
     </div>
    </div>
  </div>


</body>

</html>

Answer 1

在您的正文标记中调用pageLoad

<body onload="pageLoad()">
....

Answer 2

您的代码可以正常使用，请务必调用pageLoad（）函数，

<body onload="pageLoad()">

参见工作演示：http://jsbin.com/xeribupora/edit?html,output

Answer 3

Et瞧！

＆＃13;

function pageLoad() {


        document.getElementById("one").style.display = "";
        document.getElementById("two").style.display = "none";
        document.getElementById("three").style.display = "none";
    }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<body onload="pageLoad();">


  <div>
    <div>
     <div>     
     <h1> Junk </h1>
        <p>stuff </p>


         <div id="one"><p>hjdshfjshjshjsdjfskfsdkjf</p></div>
         <div id="two"><p>hjdshfjshjshjsdjfskfsdkjf</p></div>
         <div id="three"><p>hjdshfjshjshjsdjfskfsdkjf</p></div>
     </div>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 4

如果您可以更改正文标记，请使用：

<body onload="pageLoad()">

但是，如果它是部分代码并且您不想更改正文标记，只需在代码末尾添加：

<script>
  pageLoad();
</script>

Answer 5

有多种方法可以做到这一点。

在Css

 p div:nth-of-type(n+1){
   display:none;
 }

在javascript中

 window.onLoad=function(){
 document.getElementById("one").style.display = "";
 document.getElementById("two").style.display = "none";
 document.getElementById("three").style.display = "none";

 };

我不知道这是否有用。： - /

Answer 6

如前所述，您需要调用pageLoad（）。以下是使用JavaScript执行此操作的一种方法：

window.addEventListener("load", function load(){
    window.removeEventListener("load", load, false);
    pageLoad();
},false);

JavaScript没有显示使用CSS隐藏的元素

6 个答案: