最简单的tab切换

安静仁

于 2021-08-18 14:36:32 发布

阅读量204

点赞数

分类专栏：开发分享 jquery 小资源

本文链接：https://blog.csdn.net/anjignren/article/details/119779707

版权

开发分享同时被 3 个专栏收录

30 篇文章 2 订阅

订阅专栏

小资源

5 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

    *{
      margin:0;
      padding:0;
    }
     .tab{
      width: 400px;
      height: auto;
      display: block;
      /* background: #f1f2f2; */
    }
    .tab ul{
      width:400px;
      height:60px;
      display: flex;
    }
    .tab ul li{
     flex: 1;
     height: 60px;
     text-align: center;
     list-style: none;
     line-height: 60px;
     border:1px solid #ccc;
     background: #f1f1f1;
    }
    .tab_cont {
      width:400px;
      height: 300px;
      display: block;
    }
    .tab_cont_li {
      width:400px;
      height: 300px;
      border:1px solid #ccc;
      display: none;
      text-align: center;
    }
    .tab_cont_li1{
      display: block;
    }
    .active{
      background: orange;
      color: #f1f1f1;
    }

  <div class="tab">
    <ul>
      <li>tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>
    <div class="tab_cont">
      <div class="tab_cont_li1 tab_cont_li">tab1</div>
      <div class="tab_cont_li">tab2</div>
      <div class="tab_cont_li">tab3</div>
    </div>
  </div>

<script src="./js/jquery-3.3.1.min.js"></script>
<script>
  $('.tab ul li').mouseenter(function(){
    $('.tab_cont_li').hide();
    var index_li=$('li').index(this);
    console.log(index_li)
    $(".tab_cont_li:eq("+index_li+")").show()
  })
</script>