1. 程式人生 > >簡單的jquery選項卡功能

簡單的jquery選項卡功能

最近正在看學習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當前的內容顯示 同胞元素隱藏
 	})