js实现简单的tab切换案例

最新推荐文章于 2022-11-22 22:11:51 发布

原创最新推荐文章于 2022-11-22 22:11:51 发布 · 906 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端同时被 2 个专栏收录

33 篇文章

订阅专栏

11 篇文章

订阅专栏

博客介绍了一种效果，通过点击操作可切换相应页面，涉及JS技术实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下

在这里插入图片描述
每点击就切换相应的页面

/*css*/
html ,body ,div ,ul ,li{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        body{
            padding: 100px;
        }
        .tab .tab-h{
            height: 30px;
            width: 500px;
            position: relative;
            z-index: 2;
        }
        .tab .tab-h .tab-h-item{
            float: left;
            background-color: #eee;
            cursor: pointer;
            border: 1px solid #ccc;
        }
        .tab .tab-h li.active {
            border-bottom-color: white;
            color: red;
            background-color: white;
        }
        .tab .tab-h .tab-h-item  a{
            color: #333;
            text-decoration: none;
            width: 100px;
            display: block;
            line-height: 28px;
            text-align: center;
        }
        .tab .tab-b{
            width: 500px;
            border: 1px solid #ccc;
            position: relative;
            z-index: 1;
            top:-1px;
        }
        .tab-b-item{
            display: none;
            height: 300px;
        }
        .tab-b div.active{
            display: block;
        }

<!-- html部分 -->
<div class="tab">
    <div class="tab-h">
        <ul class="tab-h-list">
        <!-- index设置为0开始是为了让它的值作为页面显示div的索引值 -->
           <li index='0' class="tab-h-item active"><a href="javascript:void(0)">产品</a></li>
           <li index='1' class="tab-h-item"><a href="javascript:void(0)">用户</a></li>
           <li index='2' class="tab-h-item"><a href="javascript:void(0)">新闻</a></li>
           <li index='3' class="tab-h-item"><a href="javascript:void(0)">体育</a></li>
        </ul>
    </div>
    <div class="tab-b">
        <div index='0' class="tab-b-item active">页面1</div>
        <div index='1' class="tab-b-item">页面2</div>
        <div index='2' class="tab-b-item">页面3</div>
        <div index='3' class="tab-b-item">页面4</div>
    </div>
</div>

//js
var ulList=document.querySelector('.tab-h-list');
var liItem=ulList.querySelectorAll('li');
var divList=document.querySelector('.tab-b').querySelectorAll('div');
ulList.addEventListener('click',function(e){  //其实可以给这个func抽出来
    for(let i=0;i<liItem.length;i++){  //每次点击时都将所有内容class的active去掉
        liItem[i].className='tab-h-item';
        divList[i].className='tab-b-item';
    }
    var target=e.target;
    console.log(target);
    if(target==ulList){  //此处相当于是用了事件委托，免得要给每个子li元素绑定事件
        return ;
    }else if(target.href){
        let parentLi=target.parentElement;
        parentLi.className='tab-h-item active';
        console.log(parentLi.getAttribute('index')) ;
        divList[parseInt(parentLi.getAttribute('index'))].className='tab-b-item active';
    }
});