tab 简单的tab

        <div class="tab">
            <ul>
                <li data-index = "1">手机
                
                </li>
                <li data-index = "2">电脑    </li>
                <li data-index = "3">pad    </li>
                <li data-index = "4">配件    </li>
            </ul>
        </div>

<div class="content" id="content">
         <div class="tab-div" data-index='1'>
            手机
        </div>
            <div class="tab-div" data-index='2'>
            电脑
        </div>
            <div class="tab-div" data-index='3'>
            pad
        </div>
            <div class="tab-div" data-index='4'>
            配件
        </div> 
</div>

采用ul li 和div结合的方式实现 上面是html

 

.tab ul li{
    list-style: none;
    float: left;
width: 124px;
left: -38px;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    position: relative;
    cursor: pointer;
    text-align: center;
    
}
.botline{
    border-bottom: 1px #FFFFFF solid !important;
}
.tab-div{
    width: 500px;
    height: 500px;
border-right: 1px #000000 solid;
border-left: 1px #000000 solid;
border-bottom: 1px #000000 solid;
left: 0;
    position: absolute;
    margin-top: 20px;
}


.tab ul li ul div{
    width:100px;
    height: 100px;
    position:  absolute;
    border: 1px solid ;
}
.content:first-child{
    display: block;
}
.content div:not(:first-child){
    display: none;
}

上面是css内容

$('.tab ul li').mouseover(function(){
    var div=document.getElementById('content').getElementsByTagName('div');
//$(this).siblings().css('border-bottom','1px #000000 solid');
$(this).addClass('botline').siblings().removeClass('botline')
    var index=parseInt($(this).attr('data-index'));
    
    var divcount=$('.content').find('div').length;
     
    for(var i=0;i<divcount;i++)
    {
        div[i].style.display='none';
        

        if(index==parseInt(div[i].getAttribute('data-index')))
        div[i].style.display='block';
    }
})

上面是js文件内容

 

效果图