当前位置：Gxlcms > JavaScript > 基于JavaScript实现Tab选项卡切换效果

基于JavaScript实现Tab选项卡切换效果

时间：2021-07-01 10:21:17 帮助过：6人阅读

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.  <meta charset="UTF-8">
  5.  <title></title>
  6.  <style>
  7.  * {
  8.   padding: 0;
  9.   margin: 0;
  10.  }
  11.  .box {
  12.   width: 500px;
  13.   height: 400px;
  14.   border: 1px solid #ccc;
  15.   margin: 100px auto;
  16.   overflow: hidden;
  17.  }
  18.  ul {
  19.   width: 600px;
  20.   height: 40px;
  21.   margin-left: -1px;
  22.   list-style: none;
  23.  }
  24.  li {
  25.   float: left;
  26.   width: 101px;
  27.   height: 40px;
  28.   text-align: center;
  29.   font: 600 18px/40px "simsun";
  30.   background-color: pink;
  31.   cursor: pointer;
  32.  }
  33.  span {
  34.   display: none;
  35.   width: 500px;
  36.   height: 360px;
  37.   background-color: yellow;
  38.   text-align: center;
  39.   font: 700 150px/360px "simsun";
  40.  }
  41.  .show {
  42.   display: block;
  43.  }
  44.  .current {
  45.   background-color: yellow;
  46.  }
  47.  </style>
  48.  
  49.  <script>
  50.  window.onload = function () {
  51.   var boxArr = document.getElementsByClassName("box");
  52.   for(var i=0;i<boxArr.length;i++){
  53.   fn(boxArr[i]);
  54.   }
  55.   function fn(ele){
  56.   var liArr = ele.getElementsByTagName("li");
  57.   var spanArr = ele.getElementsByTagName("span");
  58.   for(var i=0;i<liArr.length;i++){
  59.    liArr[i].index = i;
  60.    liArr[i].onmouseover = function () {
  61.    for(var j=0;j<liArr.length;j++){
  62.     liArr[j].className = "";
  63.     spanArr[j].className = "";
  64.    }
  65.    this.className = "current";
  66.    spanArr[this.index].className = "show";
  67.    }
  68.   }
  69.   }
  70.  }
  71.  </script>
  72. </head>
  73. <body>
  74.  
  75.  <div class="box">
  76.  <ul>
  77.   <li class="current">鞋子</li>
  78.   <li>袜子</li>
  79.   <li>帽子</li>
  80.   <li>裤子</li>
  81.   <li>裙子</li>
  82.  </ul>
  83.  <span class="show">鞋子</span>
  84.  <span>袜子</span>
  85.  <span>帽子</span>
  86.  <span>裤子</span>
  87.  <span>裙子</span>
  88.  </div>
  89.  
  90.  <div class="box">
  91.  <ul>
  92.   <li class="current">鞋子</li>
  93.   <li>袜子</li>
  94.   <li>帽子</li>
  95.   <li>裤子</li>
  96.   <li>裙子</li>
  97.  </ul>
  98.  <span class="show">鞋子</span>
  99.  <span>袜子</span>
  100.  <span>帽子</span>
  101.  <span>裤子</span>
  102.  <span>裙子</span>
  103.  </div>
  104.  
  105.  <div class="box">
  106.  <ul>
  107.   <li class="current">鞋子</li>
  108.   <li>袜子</li>
  109.   <li>帽子</li>
  110.   <li>裤子</li>
  111.   <li>裙子</li>
  112.  </ul>
  113.  <span class="show">鞋子</span>
  114.  <span>袜子</span>
  115.  <span>帽子</span>
  116.  <span>裤子</span>
  117.  <span>裙子</span>
  118.  </div>
  119.  
  120. </body>
  121. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！