今天又學(xué)到了新知識代碼在下面哦
HTML代碼
<div id="main">
????<ul id="tabs">
????????<li class="avlie">111</li>
????????<li>222</li>
????????<li>333</li>
????????<li >444</li>
????????<li>555</li>
????</ul>
????<div id="conter">
????????<div style="display: block;">111</div>
????????<div>222</div>
????????<div>333</div>
????????<div>444</div>
????????<div>555</div>
????</div>
</div>
CSS樣式
*{
????margin: 0px;
????padding: 0px;
}
#main{
????width: 300px;
????height: 350px;
????margin: auto;
????border: 1px solid red;
}
#tabs li{
????float: left;
????width: 60px;
????height: 50px;
????line-height: 50px;
????text-align: center;
????list-style-type: none;
????cursor: pointer;
}
#conter div{
????width: 300px;
????height: 300px;
????background-color: aqua;
????margin-top: 50px;
????display: none;
}
.avlie{background-color: pink;}
jQ代碼
$('li').mouseover(function(){
????$(this).addClass('avlie').siblings().removeClass('avlie'); ???????????? //siblings一個選擇器裕膀，并且它作為第一個選擇器的同輩
????$('#conter div').hide(10).eq($(this).index()).show(10);
})
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?效果圖
