html+css+js实现Tabs标签页

最新推荐文章于 2024-10-01 20:12:28 发布

太阳花ˉ

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量175

点赞数 1

分类专栏：组件练习文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_62831076/article/details/142644526

版权

组件练习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现效果

HTML部分

<div class="tab">
    <ul class="tab-nav">
      <li><a href="#" class="active" >用户管理</a></li>
        <li><a href="#" >配置管理</a></li>
        <li><a href="#">角色管理</a></li>
        <li><a href="#">定时任务补偿</a></li>
        <li class="shortline"></li>
    </ul>
    <div class="line"></div>
    <div class="tab-content">
      <p class="item active">用户管理</p>
      <p class="item">配置管理</p>
      <p class="item">角色管理</p>
      <p class="item">定时任务补偿</p>
    </div>
  </div>

CSS部分

<style>
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .tab{
      margin: 50px auto;
      width: 870px;
      height: 120px;
      border: 1px solid rgb(228, 231, 237);
      border-radius: 3px;
      padding: 25px;
    }
    .tab .tab-nav{
      position: relative;
      list-style: none;
      display: flex;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid rgb(228, 231, 237);
    }
    .tab .tab-nav li{
      margin-right: 25px;
    }
    .tab .tab-nav a{
      text-decoration: none;
      color: #303133;
      height: 40px;
      line-height: 40px;
      transition: all 0.5s;
    }
    .tab .tab-nav .shortline{
      z-index: 2;
      position: absolute;
      bottom: -1px;
      height: 2px;
      width:64px;
      background-color: #409eff;
      transition: all 1s;
    }
    .tab .tab-nav a:hover{
      color: #409eff;
    }
    .tab .tab-content{
      display: flex;
    }
    .tab .tab-content p{
      display: none;
      font-size: 18px;
    }
    .tab .tab-content p.active{
      display: block;
    }
  </style>

JS部分

const as = document.querySelectorAll('a')
    for(let i= 0;i<as.length;i++){
      as[i].addEventListener('click',function(){
        // 1.tab-nav
        document.querySelector('.tab-nav .active').classList.remove('active')
        this.classList.add('active')
        // 2.tab-content
        document.querySelector('.tab-content .active').classList.remove('active')
        document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
        // 3.shortline
        document.querySelector('.shortline').style.width=as[i].offsetWidth+'px'
        document.querySelector('.shortline').style.left=as[i].offsetLeft+'px'
      })
    }