javascript（十三）选项卡练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style type="text/css">
    *{
      margin:0px;
      padding:0px;
      list-style:none;
    }
    .OneBox ul{
      width:600px;
      background:#33344A;
    }
    .OneBox ul li{
      float:left;
      height:60px;
      line-height:60px;
      transition:0.3s;
      width:100px;
      text-align:center;
      color: #717181;
    }
    .TwoBox ul li{
      position: absolute;
      transition: 0.3s;
      padding: 30px;
      font-family: "微软雅黑";
      font-size: 21px;
      width: 600px;
      height: 10px;
    }
    a{
      text-decoration:none;
      color: #717181;
    }
    .show{
      opacity: 1;
    }
    .hide{
      opacity: 0;
    }
    .ys{
      background: #e74c3c;
    }
  </style>
  <script type="text/javascript">
    window.onload=function(){
      var OneLi = document.getElementsByClassName('OneBox')[0].getElementsByTagName('li');
      var TwoLi = document.getElementsByClassName('TwoBox')[0].getElementsByTagName('li');
      var liA = document.getElementsByClassName('OneBox')[0].getElementsByTagName('a');
      OneLi[0].className='ys';
      liA[0].style.color="white";
      for (var i = 0; i < OneLi.length; i++) {
        OneLi[i].index=i;
        OneLi[i].onmouseover=function(){
          var num = parseInt(this.index);
          for (var j = 0; j < OneLi.length; j++) {
            OneLi[j].className='';
            liA[j].style.color='';
            TwoLi[j].className='hide';
          }
          OneLi[num].className='ys';
          liA[num].style.color='white';
          TwoLi[num].className='show';
        }
      }
    }
  </script>
</head>
<body>
  <div class="box">
    <div class="OneBox">
      <ul>
        <li><a href="javascript:void(0);">新闻</a></li>
        <li><a href="javascript:void(0);">综艺</a></li>
        <li><a href="javascript:;">娱乐</a></li>
        <li><a href="javascript:;">购物</a></li>
        <div style="clear:both"></div>
      </ul>
    </div>
    <div class="TwoBox">
      <ul>
        <li class="show">新闻内容</li>
        <li class="hide">综艺内容</li>
        <li class="hide">娱乐内容</li>
        <li class="hide">购物内容</li>
      </ul>
    </div>
  </div>
</body>
</html>
自动轮播参考原生js三种选项卡效果（轮播）
javascript（十三）选项卡练习

猜你喜欢
