js 循环添加点击事件

最新推荐文章于 2024-06-25 07:00:06 发布

mkmin

最新推荐文章于 2024-06-25 07:00:06 发布

阅读量3.9k

点赞数 3

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/hushilin001/article/details/70301374

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

直接代码：

<!DOCTYPE html>
<html>
   

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           li {
               list-style: none;
               float: left;
               margin: 0 auto;
               width: 24.5%;
               height: 100%;
               text-align: center;
               line-height: 90px;
               border-bottom: 1px solid #008000;
               border-left: 1px;
               border-right: 1px;
               border-top: 5px;
           }

           li:hover {
               border-bottom: 0px;
               border-left: 1px solid #008000;
               border-right: 1px solid #008000;
               border-top: 5px solid #008000;
           }

           .mydiv {
               display: none;
           }
       </style>
       <script type="text/javascript">
           window.onload = function() {
               var mydiv = document.querySelectorAll(".mydiv");
               var li = document.querySelectorAll("li");
               for(var i = 0; i < li.length; i++) {
                   (function(x) {
                       li[x].onclick = function() {
                           for(var j = 0; j < li.length; j++) {
                               mydiv[j].style.display = "none";
                           }
                           mydiv[x].style.display = "block";
                       }
                   })(i);
               }
           }
       </script>
       </script>
   </head>

   <body>
       <div style="position: relative; width: 100%; height: 500px; overflow: hidden;">
           <div style="position: absolute; left: 0; top: 0; height: 100px; width: 100%; overflow: hidden;">
               <ul>
                   <li>测试1</li>
                   <li>测试2</li>
                   <li>测试3</li>
                   <li>测试4</li>

               </ul>

           </div>
           <div style="position: absolute; left: 0; top: 100px; height: 400px; width: 100%;">
               <div class="mydiv" id="mydiv1" style="background: yellow; height: 100%; width: 100%;">这是布局1</div>
               <div class="mydiv" id="mydiv2" style="background: yellow; height: 100%; width: 100%;">这是布局2</div>
               <div class="mydiv" id="mydiv3" style="background: yellow; height: 100%; width: 100%;">这是布局3</div>
               <div class="mydiv" id="mydiv4" style="background: yellow; height: 100%; width: 100%;">这是布局4</div>
           </div>
       </div>
   </body>

</html>