tab栏切换

 

 

   <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 500px;
        height: 200px;
        border: 1px solid #ccc;
        margin: 50px auto;
        overflow: hidden;
      }
      ul {
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style: none;
      }
      li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsun";
        background-color: pink;
        cursor: pointer;
      }
      span {
        display: none;
        width: 500px;
        height: 160px;
        background-color: yellow;
        text-align: center;
        font: 700 100px/160px "simsun";
      }
      .show {
        display: block;
      }
      .current {
        background-color: yellow;
      }
    </style>

    <script>
      window.onload = function () {
        //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
        //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。

        var liArr = document.getElementsByTagName("li");
        var spanArr = document.getElementsByTagName("span");

        for (var i = 0; i < liArr.length; i++) {
          //绑定索引值（新增一个自定义属性：index属性）
          liArr[i].index = i;
          liArr[i].onclick = function () {
            //1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
            for (var j = 0; j < liArr.length; j++) {
              liArr[j].className = "";
              spanArr[j].className = "";
            }
            this.className = "current";
            spanArr[this.index].className = "show"; //【重要代码】
          };
        }
      };
    </script>
  </head>
  <body>
    <div class="box">
      <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        1
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
      </ul>
      <span class="show">鞋子</span>
      <span>袜子</span>
      <span>帽子</span>
      <span>裤子</span>
      <span>裙子</span>
    </div>
  </body>

 

posted @ 2022-04-18 11:18  罗砂  阅读(38)  评论(0)    收藏  举报