您的位置：首页 > Web前端 > JavaScript

js 循环添加点击事件

2017-04-20 19:57 197 查看

直接代码：

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端

相关文章推荐

新的分享

章节导航