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