如何在JavaScript中放置onload事件

Question

我正在使用此div中的“实际1格”，该2格中有2个部分1个部分是标题列表，第二个部分仅显示此设备中的移动设备仅显示第一部分中所有列出的标题或单击任何标题时单击的标题图像显示在设备的第二部分中，但是第一次加载页面时我遇到一个问题，然后所有图像都显示在设备下方，因此请给我解决方案。

首次加载页面时，然后显示这种类型的视图when first time load page then show this type of view

但是当页面首先加载时actual view i need then after i m click other link are click then change image in device

，我需要这种视图

<script>

        function myFunction1() {

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

          document.getElementById("myDIV2").style.display = "none";

          document.getElementById("myDIV3").style.display = "none";

          document.getElementById("myDIV4").style.display = "none";

          document.getElementById("myDIV5").style.display = "none";

          document.getElementById("myDIV6").style.display = "none";

          document.getElementById("myDIV7").style.display = "none";

          document.getElementById("myDIV8").style.display = "none";

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction2() {

          document.getElementById("myDIV1").style.display = "none";

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

          document.getElementById("myDIV3").style.display = "none";

          document.getElementById("myDIV4").style.display = "none";

          document.getElementById("myDIV5").style.display = "none";

          document.getElementById("myDIV6").style.display = "none";

          document.getElementById("myDIV7").style.display = "none";

          document.getElementById("myDIV8").style.display = "none";

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction3() {

          document.getElementById("myDIV1").style.display = "none";

          document.getElementById("myDIV2").style.display = "none";

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

          document.getElementById("myDIV4").style.display = "none";

          document.getElementById("myDIV5").style.display = "none";

          document.getElementById("myDIV6").style.display = "none";

          document.getElementById("myDIV7").style.display = "none";

          document.getElementById("myDIV8").style.display = "none";

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction4() {

          document.getElementById("myDIV1").style.display = "none"; 

          document.getElementById("myDIV2").style.display = "none";

          document.getElementById("myDIV3").style.display = "none";

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

          document.getElementById("myDIV5").style.display = "none";

          document.getElementById("myDIV6").style.display = "none";

          document.getElementById("myDIV7").style.display = "none";

          document.getElementById("myDIV8").style.display = "none";

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction5() {

          document.getElementById("myDIV1").style.display = "none"; 

          document.getElementById("myDIV2").style.display = "none";

          document.getElementById("myDIV3").style.display = "none";

          document.getElementById("myDIV4").style.display = "none";

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

          document.getElementById("myDIV6").style.display = "none";

          document.getElementById("myDIV7").style.display = "none";

          document.getElementById("myDIV8").style.display = "none";

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction6() {

          document.getElementById("myDIV1").style.display = "none"; 

          document.getElementById("myDIV2").style.display = "none";

          document.getElementById("myDIV3").style.display = "none";

          document.getElementById("myDIV4").style.display = "none";

          document.getElementById("myDIV5").style.display = "none";

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

          document.getElementById("myDIV7").style.display = "none";

          document.getElementById("myDIV8").style.display = "none";

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction7() {

          document.getElementById("myDIV1").style.display = "none"; 

          document.getElementById("myDIV2").style.display = "none";

          document.getElementById("myDIV3").style.display = "none";

          document.getElementById("myDIV4").style.display = "none";

          document.getElementById("myDIV5").style.display = "none";

          document.getElementById("myDIV6").style.display = "none";

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

          document.getElementById("myDIV8").style.display = "none";

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction8() {

          document.getElementById("myDIV1").style.display = "none"; 

          document.getElementById("myDIV2").style.display = "none";

          document.getElementById("myDIV3").style.display = "none";

          document.getElementById("myDIV4").style.display = "none";

          document.getElementById("myDIV5").style.display = "none";

          document.getElementById("myDIV6").style.display = "none";

          document.getElementById("myDIV7").style.display = "none";

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

          document.getElementById("myDIV9").style.display = "none";

        }

        function myFunction9() {

          document.getElementById("myDIV1").style.display = "none"; 

          document.getElementById("myDIV2").style.display = "none";

          document.getElementById("myDIV3").style.display = "none";

          document.getElementById("myDIV4").style.display = "none";

          document.getElementById("myDIV5").style.display = "none";

          document.getElementById("myDIV6").style.display = "none";

          document.getElementById("myDIV7").style.display = "none";

          document.getElementById("myDIV8").style.display = "none";

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

        }

        </script>

<body>
<div id="project" class="container" style="padding-top:5%;">
            <div class="container">
                <div class="row">
                    <div class="heading-section col-md-12 text-center">
                        <ul>
                            <h2>Our Projects</h2>
                            <p>All Cliants are setisfide.</p>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="container"> 
                <div class="row">
                    <div class="col-md-6">
                        <ul>
                          <button onclick="myFunction1()" style="background-color:white;border:none;"> <a style="font-size:25px;">KAISER PERMANENTE</a></button>
                          <br>
                          <button onclick="myFunction2()" style="background-color:white;border:none;"> <a style="font-size:25px;">SONY MAKE.BELIEVE</a></button>
                          <br>
                          <button onclick="myFunction3()" style="background-color:white;border:none;"> <a style="font-size:25px;">AMGEN</a></button>
                          <br>
                          <button onclick="myFunction4()" style="background-color:white;border:none;"> <a style="font-size:25px;">GUESS U.S.A.</a></button>
                          <br>
                          <button onclick="myFunction5()" style="background-color:white;border:none;"> <a style="font-size:25px;">CITY OF OAKLAND</a></button>
                          <br>
                          <button onclick="myFunction6()" style="background-color:white;border:none;"> <a style="font-size:25px;">STANFORD visibility</a></button>
                          <br>
                          <button onclick="myFunction7()" style="background-color:white;border:none;"> <a style="font-size:25px;">VERIZONE</a></button>
                          <br>
                          <button onclick="myFunction8()" style="background-color:white;border:none;"> <a style="font-size:25px;">FANDANGO</a></button>
                          <br>
                          <button onclick="myFunction9()" style="background-color:white;border:none;"> <a style="font-size:25px;">N.B.C</a></button>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <div class="smartphone">
                            <ul>
                                <div id="myDIV1" >
                                    <img src="images/gallery/p1.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV2">
                                  <img src="images/gallery/p7.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV3">
                                  <img src="images/gallery/p8.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV4">
                                  <img src="images/gallery/p3.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV5">
                                  <img src="images/gallery/p4.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV6">
                                  <img src="images/gallery/p2.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV7">
                                  <img src="images/gallery/p5.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV8">
                                  <img src="images/gallery/p6.jpg" style="width:328px;height:360px;"/>
                                </div>
                                <div id="myDIV9">
                                  <img src="images/gallery/p9.jpg" style="width:328px;height:360px;"/>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

<style>
#myDIV1 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV2 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV3 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV4 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV5 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV6 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV7 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV8 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}

#myDIV9 {
  width: 100%;
  height: 360px;
  padding: 0px 0;
  text-align: center;
  margin-top: 0px;
}
</style>