最近觉得中关村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 哈哈