jQuery:仿MSN网站的tab效果

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_33966365

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量140

点赞数

文章标签： javascript ViewUI

本文介绍了仿MSN官网的Tab切换效果实现过程，包括HTML结构搭建、CSS样式设置及jQuery交互逻辑编写，展示了日点击与周点击两个Tab下不同的内容列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天不知怎的，一直在做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代码：

 * { 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代码：

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