JavaScript-----tab栏的切换

最新推荐文章于 2023-12-11 16:11:19 发布

胆小鬼vs

最新推荐文章于 2023-12-11 16:11:19 发布

阅读量293

点赞数

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

本文链接：https://blog.csdn.net/m0_54020832/article/details/127350329

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单实现一下tab栏的切换：

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>tab栏切换的实现</title>
  <head>
    <style>
      .box{
        width: 600px;
        height: 300px;
        margin: auto;
      }
      .tab_lis{
        height: 39px;
        background-color: #aaa;
        
      }
      .tab_lis ul li{
        float: left;
        height: 39px;
        line-height: 39px;
        display: inline;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
        
      }
      .tab_con{
        margin-top: 20px;
        height: 200px;
      }
      .current{
        color: #fff;
        background-color: red;
      }
      .item{
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="tab_lis">
        <ul>
          <li class="current">商品详情</li>
          <li>商品评价</li>
          <li>其他信息</li>
          <li>类似商品</li>
        </ul>
      </div>
      <div class="tab_con">  
          <div class="item" style="display:block ;">商品详情页面</div>
          <div class="item">商品评价页面</div>
          <div class="item">其他信息页面</div>
          <div class="item">类似商品页面</div>
        
      </div>
    </div>
    <script>
      //1.上面的tab_lis点击的
      //获取元素
      var tab_lis = document.querySelector('.tab_lis');
      var lis =tab_lis.querySelectorAll('li');
      var items = document.querySelectorAll('.item');     

      //tab_lis 循环遍历所有lis
      for(var i=0;i<lis.length;i++){
        //开始给4个小li设置索引号----items通过索引号来显示哪个
        lis[i].setAttribute('date-index',i);
        lis[i].onclick = function(){
          //清除其他的className，保留自己的ClassName；
          for(var i = 0; i<lis.length;i++){
            lis[i].className='';
          }
          this.className='current';
          //2.tab_con中上面点击哪个就显示对应的tab_con
          var index = this.getAttribute('date-index');
          //隐藏其他的页面的内容
          for(var i=0; i<items.length; i++){
            items[i].style.display = 'none';
          }
          items[index].style.display = 'block';
        }
      }
      
    </script>
  </body>
</html>

实现的效果：