仿中關村win8頻道（win8.zol.com.cn）下的tab效果

最近以爲中關村win8頻道下的那個Tab效果很好看。

 

一時興起就本身作了一個。以爲還蠻不錯的，特意來給你們分享一下。如下是相關的HTML頁面寫法：

 1 <div class="popular">
 2     <ul class="tabs">
 3         <li class="tab-0 active">應用軟件</li>
 4         <li class="tab-1">產品推薦</li>
 5         <li class="tab-r"><a href="#">Q&A</a></li>  
 6     </ul>
 7     <div class="dairyPopular list">
 8          //應用軟件
 9     </div>
10     <div class="weeklyPopular list">
11        //產品推薦    
12     </div>
13 </div>

相關的部署仍是在分類出來的兩個相同的list類能夠本身在CSS裏寫本身想要的，以上的就很少寫CSS給你們了。就靠你們的想像力了，嘿嘿！其實能夠作的更好看。下邊是JS代碼：

$(document).ready(function() {
	$('a').attr('target', '_blank');   
 
	$('.tabs li').mousemove(function() {
		//最右邊的tab不進行任何操做							 
		if($(this).hasClass('tab-r')) {
			return;
		};
		//添加當前激活的狀態
		$(this).siblings().removeClass('active').end()
			.addClass('active');
		//切換tab		
		if($(this).hasClass('tab-0')) {
		        $('.list').hide();
		        $('.dairyPopular').show();	
		        //也能夠寫成$(this).parent().nextAll('ul:eq(0)').show();,這樣的好處是沒必要制定特定的class類
		} else if($(this).hasClass('tab-1')) {
			$('.list').hide();
			$('.weeklyPopular').show();
			//也能夠寫成$(this).parent().nextAll('ul:eq(1)').show();,這樣的好處是沒必要制定特定的class類
		};
	});
});

 另外加了這個JS代碼後，咱再加個用來作兼容的JQuery文件效果會更好，能夠直接調用jquery：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script>

 OK，這樣就大功形成了。o(∩_∩)o 哈哈