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

最近觉得中关村win8频道下的那个Tab效果很好看。

 

一时兴起就自己做了一个。觉得还蛮不错的，特地来给大家分享一下。以下是相关的HTML页面写法：

<div class="popular">
    <ul class="tabs">
        <li class="tab-0 active">应用软件</li>
        <li class="tab-1">产品推荐</li>
        <li class="tab-r"><a href="#">Q&A</a></li>  
    </ul>
    <div class="dairyPopular list">
         //应用软件
    </div>
    <div class="weeklyPopular list">
       //产品推荐    
    </div>
</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 哈哈