jQuery:仿MSN网站的tab效果

今天不知怎的，一直在做tab的特效，看到MSN官网的tab效果不错，就花了一点点时间小做了一下，具体效果：如下

html代码：

<li class="tab-r"><a href="http://www.ihiro.org/">www.ihiro.org</a></li>

</ul>

<li><a title="刘翔头号粉丝已见过飞人父母深得翔妈喜欢" href="http://msn.sports.ynet.com/view.jsp?oid=53541473">刘翔头号粉丝已见过飞人父母深得翔妈喜欢</a></li>

<li><a title="霍启刚如何赢田亮趁虚而入为何偏爱郭晶晶" href="http://msn.sports.ynet.com/view.jsp?oid=53527614">霍启刚如何赢田亮趁虚而入为何偏爱郭晶晶</a></li>

<li><a title="言承旭首度自爆与林志玲恋情：她曾真的爱我" href="http://msn.ent.ynet.com/view.jsp?oid=53541753">言承旭首度自爆与林志玲恋情：她曾真的爱我</a></li>

<li><a title="宋祖英鸟巢开唱周董跑调多明戈朗朗吻玉手" href="http://msn.ent.ynet.com/view.jsp?oid=53541724">宋祖英鸟巢开唱周董跑调多明戈朗朗吻玉手</a></li>

<li><a title="伏明霞暴肥现身香港中环凸肚素颜头发凌乱" href="http://msn.ent.ynet.com/view.jsp?oid=53543086">伏明霞暴肥现身香港中环凸肚素颜头发凌乱</a></li>

<li><a title="暗夜中的天使与雪佛兰大黄蜂的艳遇记" href="http://ad.cn.doubleclick.net/clk%3B215572633%3B37880853%3Bp?http://auto.msn.com.cn/auto_international/history/carslide/220899.shtml">暗夜中的天使与雪佛兰大黄蜂的艳遇记</a></li>

<li><a title="油价涨到史上最贵 13款省油车替君分忧(第1页)" href="http://auto.msn.com.cn/auto_guide/topic/2009/6/30/220916.shtml">油价涨到史上最贵 13款省油车替君分忧(第1页)</a></li>

<li><a title="别为省油毁了爱车常见驾驶误区6条(第1页)" href="http://auto.msn.com.cn/auto_diy/tips/2009/7/1/220944.shtml">别为省油毁了爱车常见驾驶误区6条(第1页)</a>  </li>

<li><a title="百公里油耗不到7L 7款1.6L以下省油车(第1页)" href="http://auto.msn.com.cn/auto_guide/topic/2009/7/1/220968.shtml">百公里油耗不到7L 7款1.6L以下省油车(第1页)</a></li>

</ul>

<li><a title="最全体坛女星素颜照生活中真实一面最可爱" href="http://msn.sports.ynet.com/pic.jsp?oid=53507789">最全体坛女星素颜照生活中真实一面最可爱</a></li>

<li><a title="王宝强赶工薯片充饥女友逛街怒视记者偷拍" href="http://msn.ent.ynet.com/view.jsp?oid=53507578">王宝强赶工薯片充饥女友逛街怒视记者偷拍</a></li>

<li><a title="昔日歌王迈克尔-杰克逊去世终年50岁(图)" href="http://msn.ent.ynet.com/view.jsp?oid=53368359">昔日歌王迈克尔-杰克逊去世终年50岁(图)</a></li>

<li><a title="侯耀文骨灰两年未入土两女儿争8000万遗产" href="http://msn.ent.ynet.com/view.jsp?oid=53368876">侯耀文骨灰两年未入土两女儿争8000万遗产</a></li>

<li><a title="马伊琍产后上围猛增露副乳沈傲君婚后发福" href="http://msn.ent.ynet.com/view.jsp?oid=53474704">马伊琍产后上围猛增露副乳沈傲君婚后发福</a></li>

<li><a title="刘翔头号粉丝已见过飞人父母深得翔妈喜欢" href="http://msn.sports.ynet.com/view.jsp?oid=53541473">刘翔头号粉丝已见过飞人父母深得翔妈喜欢</a></li>

<li><a title="美国少妇12年44次整容整成真人版芭比(图)" href="http://msn.tech.ynet.com/view.jsp?oid=53509429">美国少妇12年44次整容整成真人版芭比(图)</a></li>

<li><a title="员工偷嘴曝丑闻：家乐福卤味损毁率接近三成" href="http://msn.china.ynet.com/view.jsp?oid=53508037">员工偷嘴曝丑闻：家乐福卤味损毁率接近三成</a></li>

<li><a title="谭维维恋情曝光月下牵手甜蜜依偎两人同居" href="http://msn.ent.ynet.com/view.jsp?oid=53486906">谭维维恋情曝光月下牵手甜蜜依偎两人同居</a></li>

</ul>

</div>

css代码：

123456789101112131415161718

 * { margin:0; padding:0;}body { font:12px "宋体"; color:#049; padding:8px;}a { text-decoration:none; color:#049;}a:hover { text-decoration:underline;}ul { list-style:none;}li { height:23px; line-height:23px;}.popular { width:298px; border:1px solid #ace; padding-bottom:10px;}.tabs { overflow:hidden; height:1%;}.tabs li { border:1px solid #ace; border-width:0 1px 1px 0; background:#f1f7fc; width:84px; text-align:center; float:left;}.tabs li.active { background:#fff; border-bottom-color:#fff; font-weight:bold;}.tabs li.tab-r { border-right:0; width:118px; text-align:right; padding-right:10px;}.tabs li.tab-r a { color:#F06; font-weight:bold; font-family:Georgia;}.list { margin:7px 0 0 7px; padding-left:35px; background:url(popularlist.gif) no-repeat;}.weeklyPopular { display:none;}

jQuery代码：

1234567891011121314151617181920212223

$(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类};});});