tab栏切换

最新推荐文章于 2021-04-23 23:06:33 发布

hu_Time

最新推荐文章于 2021-04-23 23:06:33 发布

阅读量164

点赞数

分类专栏： html+css JavaScript 文章标签： tab栏切换切换

本文链接：https://blog.csdn.net/hu_Time/article/details/100894774

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

html+css

11 篇文章 1 订阅

订阅专栏

描述：原生js实现tab栏切换
作者：胡胜辉

html:

<div class="main">
      <div class="nav-box">
        <div id="content" class="tab-box">
            <div class="tab">
              <span >全部</span >
            </div>
            <div class="tab">
              <span>待付款</span>
            </div>
            <div class="tab">
              <span>待发货</span>
            </div>
            <div class="tab">
              <span>待收货</span>
            </div>
            <div class="tab">
              <span>待评价</span>
            </div>
        </div>
      </div>
        <div id="box" class="box">
            <div class="tab" style="display: block;">
                <div>1号盒子</div>
                <div>1号盒子</div>
                <div>1号盒子</div>
                <div>1号盒子</div>
                <div>1号盒子</div>
                <div>1号盒子</div>
            </div>
            <div class="tab">待付款</div>
            <div class="tab">待发货</div>
            <div class="tab">待收货</div>
            <div class="tab">待评价</div>
        </div>
    </div>

css:

//总容器
.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    border: 1px solid red;
}
.main .nav-box {
    width: 100%;
    height: 2.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}
/*订单状态切换容器*/
.main .nav-box .tab-box {
    height: 100%;
    width: 92%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
}
.main .nav-box .tab-box .tab {
    width: 1.5rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main .nav-box .tab-box .tab:hover{
    border-bottom: 0.1rem solid #fd4e5f;
}
.main .nav-box .tab-box .tab:active{
    border-bottom: 0.1rem solid #fd4e5f;
}
.main .nav-box .tab-box .tab span{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 3rem;
    height: 100%;
    color: #797979;
    font-family: PingFang-SC-Medium;
    font-size: 15px;
    /*border: 1px solid red;*/
}
.main .nav-box .tab-box .tab span:hover{
    color: #fd4e5f;
}
.box {
    width: 100%;
    background: #f2f2f2;
}

.box .tab {
    width: 100%;
    height: 50%;
    border: 1px solid black;
    /*background: red;*/
    display: none;
    text-align: center;
    color: #fff;
}

js：

   // tab切换
    var btns = document.getElementById('content').getElementsByClassName('tab');   
    var boxs = document.getElementById('box').getElementsByClassName('tab');   
    console.log(btns);   
    console.log(boxs);   
    for (var i = 0; i < btns.length; i++) {      
        btns[i].index = i; //获取当前索引
        btns[i].onmouseover = function() {          //清空所有类名
            for (var k = 0; k < boxs.length; k++) {            
                boxs[k].style.display = 'none';         
            }         
             //显示对应当前索引的盒子
            boxs[this.index].style.display = 'block';      
        }    
    }