今天不知怎的，一直在做tab的特效，看到MSN官網的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="http://www.ihiro.org/">www.ihiro.org</a></li>?

??</ul>?

??<ul class="dairyPopular list">?

?? ?<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>&nbsp;&nbsp;</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>?

??<ul class="weeklyPopular list">?

?? ?<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類};});});

總結

以上是生活随笔為你收集整理的jQuery:仿MSN网站的tab效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。