簡單的jquery選項卡功能
阿新 • • 發佈:2019-01-25
最近正在看學習jquery 選項卡功能只是實現出來可能並不完善或者合理
<div style="tab"> <div style="tabtop"> <div class="tabs"> <li class="tabsshow">第一個標題</li> <li>第二個標題</li> <li>第三個標題</li> </div> </div> <div style="tabbottom"> <div class="tabc tabcshow">內容1</div> <div class="tabc">內容2</div> <div class="tabc">內容3</div> </div> </div>
.tab{width: 500px;}
.tabtop{width: 500px; height: 50px; background: #dcdcdc;}'
.tabbottom{width: 100%;}
.tabs li{ width: 33%; float: left; line-height: 50px; }
.tabc{ width: 100%; display: none; }.tabsshow{background: #ddffcc;}.tabcshow{display: block;}
$('.tabs li').mouseover(function(){ var index=$(this).index(); //獲取當前的索引值 $('.tabs li').eq(index).css('background','#ddffcc').siblings().css('background','none'); //給tab標題加高亮樣式並取消同胞元素的樣式 $('.tabc').eq(index).show().siblings().hide(); //tab當前的內容顯示 同胞元素隱藏 })