js实现简单的tab切换案例

效果如下

每点击就切换相应的页面

/*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';
    }
});