tab 简单的tab

Posted 2020-10-02 酱油荷

        <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文件内容

 

效果图