<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文件内容
效果图
时间: 2024-10-04 11:39:24