选项卡

//CSS部分
<style type="text/css">
    *{
        margin:0;
        padding:0;
        list-style: none;
    }
    .clearfix:after{
        display:block;
        clear:both;
        content:"";
        zoom:1;
    }
    .bigbox{
        margin:0 auto;
        border:1px solid #000;
        width:500px;
        height:500px;
        overflow:hidden;
    }
    .box{
        text-align: center;
        line-height: 460px;
    }
    .items li{
        float:left;
        width:100px;
        height:40px;
        text-align: center;
        line-height: 40px;
        border-bottom: 1px solid #000;
    }

</style>

<div class="bigbox">
    <div>
        <ul class="items">
            <li style="background:pink">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    <div class="box">11</div>
    <div class="box">22</div>
    <div class="box">33</div>
    <div class="box">44</div>
    <div class="box">55</div>
</div>

//JS部分
//获取li全部的数组       等于新变量的值
var item=document.getElementsByClassName('items')[0].getElementsByTagName('li')
var box=document.getElementsByClassName('box')


//     //为了获取点击事件的下标
    for(i=0; i<item.length; i++){
        //相当与覆个新值
        item[i].aaa=i;
        item[i].function(){
            for(j=0; j<box.length; j++){
                //通过里面的循环进行链接
                //里面为了隐藏
                box[j].style.display="none";
                item[j].style.background="#fff"
            }
            //这里是为了 通过点击事件来恢复显示
            this.style.background="pink";
            box[this.aaa].style.display="block";
        }
    }