仿中关村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 哈哈