您的位置：首页 > Web前端 > JQuery

jquery学习之tab切换及动画效果，涉及animate()，siblings()

2014-03-11 10:11 561 查看
效果图：



代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab01</title>
<style type="text/css">
<!--
body, p, h1, h2, h3, h4, h5, h6, dl, dd, form { margin:0; padding:0px }
body { font-family:\5FAE\8F6F\96C5\9ED1, \9ED1\4F53; color:#464646; line-height:24px; font-size:12px; background:#fff }
ul, ol, li, input { list-style:none; margin:0; padding:0; border:0px }
img { border:none; }
.clearfix:after { content:"."; visibility:hidden; display:block; clear:both; height:0; }
.clearfix { *zoom:1;
}
.blank0 { height:0px; overflow:hidden; clear:both }
.fl { float:left; }
.fr { float:right; }
a { text-decoration:none; color:#464646 }
a:hover { text-decoration:underline }
.w_355 { width: 365px; }
.pat60 { padding-top: 60px; }
.tab { border-bottom:1px #ccc solid; margin-left:8px }
.tab li { cursor:pointer; border-bottom:1px #ccc solid; float:left; width:85px; font-size:15px; bottom:-1px; text-align:center; position:relative; text-align:center; font-weight:bold }
.tab li em { width:4px; height:4px; display:block; overflow:hidden; background:#dfdfdf; position:absolute; top:22px; right:0px }
.tab li.cur { position:relative; border-bottom:1px #004ea2 solid; color:#004ea2; cursor:pointer }
.tab li.cur a { color:#004ea2; cursor:pointer }
.tab li.cur i { display:block; width:16px; height:10px; background:url(http://www.comac.cc/images/icon.png) no-repeat -88px 0; position:absolute; right:0; top:19px;  right:75px }
.tab li.cur em { background:#004ea2 }
.tab_nr ul { display:none }
.tab_nr h1 { font-size:15px; color:#004ea2; line-height:36px; text-align:center }
.tab_nr h1 a { color:#004ea2; }
.tab_nr li { font-size:13px; background-position:-123px 11px; text-indent:15px; position:relative; line-height:16px; padding:4px 0; }
.tab_nr li span { position:absolute; top:5px; right:0px; color:#b1b1b1; font-size:12px }
.tab_nr li a { color:#464646 }
-->
</style>
</head>
<body>
<div class="w_355 fl pat60">
<ul class="tab clearfix msf">
<li class="cur"><a target="_blank" href="./xwzx/gsxw/">公司新闻</a><i></i><em></em></li>
<li><a target="_blank" href="./xwzx/gzdt/">国资动态</a><i></i><em></em></li>
<li><a target="_blank" href="./xwzx/xxgg/">信息公告</a><i></i><em></em></li>
</ul>
<div class="tab_nr">
<ul style="display:block;">
<h1><a target="_blank" title="中国商飞公司召开纪念“三八”国际劳动妇女节先进表彰暨座谈会" href="http://116.213.201.133/xwzx/gsxw/201403/07/t20140307_1452303.shtml"> 中国商飞公司召开纪念“三八”国际劳...</a></h1>
<li> <a target="_blank" title="伊顿公司副董事长兼工业集团首席运营官骆德到中国商飞公司访问" href="http://116.213.201.133/xwzx/gsxw/201403/07/t20140307_1452295.shtml">伊顿公司副董事长兼工业集团首席运营官骆...</a> <span>2014-03-07</span> </li>
<li> <a target="_blank" title="刘林宗调研基层党支部和班组建设" href="http://116.213.201.133/xwzx/gsxw/201403/07/t20140307_1451565.shtml">刘林宗调研基层党支部和班组建设</a> <span>2014-03-06</span> </li>
<li> <a target="_blank" title="中国商飞公司召开2014年保密工作会" href="http://116.213.201.133/xwzx/gsxw/201403/06/t20140306_1448213.shtml">中国商飞公司召开2014年保密工作会</a> <span>2014-03-06</span> </li>
<li> <a target="_blank" title="【勤俭研制大飞机】从节约每一张纸开始" href="http://116.213.201.133/xwzx/gsxw/201403/06/t20140306_1447420.shtml">【勤俭研制大飞机】从节约每一张纸开始</a> <span>2014-03-06</span> </li>
<li> <a target="_blank" title="新年开好局 马上立新功" href="http://116.213.201.133/xwzx/gsxw/201403/06/t20140306_1447419.shtml">新年开好局 马上立新功</a> <span>2014-03-06</span> </li>
<li> <a target="_blank" title="中组部、国资委调研组到中国商飞公司调研" href="http://116.213.201.133/xwzx/gsxw/201403/06/t20140306_1447418.shtml">中组部、国资委调研组到中国商飞公司调研</a> <span>2014-03-05</span> </li>
</ul>
<ul style="padding-top: 10px;">
<li> <a target="_blank" title="财经：国资改革路线图" href="http://116.213.201.133/xwzx/gzdt/201403/05/t20140305_1444596.shtml">财经：国资改革路线图</a><span>2014-03-04</span></li>
<li> <a target="_blank" title="西安日报：进一步完善现代企业制度的路径选择" href="http://116.213.201.133/xwzx/gzdt/201403/05/t20140305_1444595.shtml">西安日报：进一步完善现代企业制度的路径选择</a><span>2014-03-03</span></li>
<li> <a target="_blank" title="红旗文稿：中国式国有企业管理是社会主义制度文明的重要体现" href="http://116.213.201.133/xwzx/gzdt/201402/28/t20140228_1434390.shtml">红旗文稿：中国式国有企业管理是社会主义...</a><span>2014-02-26</span></li>
<li> <a target="_blank" title="学习时报：发展混合所有制经济政策的现实意义" href="http://116.213.201.133/xwzx/gzdt/201402/25/t20140225_1425674.shtml">学习时报：发展混合所有制经济政策的现实意义</a><span>2014-02-25</span></li>
<li> <a target="_blank" title="北京日报：国有企业新改革论" href="http://116.213.201.133/xwzx/gzdt/201402/25/t20140225_1425673.shtml">北京日报：国有企业新改革论</a><span>2014-02-24</span></li>
<li> <a target="_blank" title="中国青年报：国企混合所有制改革箭已离弦" href="http://116.213.201.133/xwzx/gzdt/201402/25/t20140225_1425672.shtml">中国青年报：国企混合所有制改革箭已离弦</a><span>2014-02-24</span></li>
<li> <a target="_blank" title="经济日报：对国企改革发展的再认识" href="http://116.213.201.133/xwzx/gzdt/201402/21/t20140221_1417328.shtml">经济日报：对国企改革发展的再认识</a><span>2014-02-20</span></li>
</ul>
<ul style="padding-top: 10px;">
<li> <a target="_blank" title="中国商用飞机有限责任公司2014年校园招聘启事" href="http://116.213.201.133/xwzx/xxgg/201401/11/t20140111_1335449.shtml">中国商用飞机有限责任公司2014年校园招聘启事</a><span>2013-08-30</span></li>
<li> <a target="_blank" title="《大飞机》杂志征文启事" href="http://www.comac.cc/main/hkzx/201212/03/P020130820368330482241.pdf">《大飞机》杂志征文启事</a><span>2013-08-13</span></li>
<li> <a target="_blank" title="中国商飞公司博士后科研工作站2013年度博士后招收计划" href="http://116.213.201.133/xwzx/xxgg/201401/11/t20140111_1335447.shtml">中国商飞公司博士后科研工作站2013年度博...</a><span>2013-07-12</span></li>
<li> <a target="_blank" title="中国商飞北京民用飞机技术研究中心2013年春季社会招聘" href="http://116.213.201.133/xwzx/xxgg/201401/11/t20140111_1335446.shtml">中国商飞北京民用飞机技术研究中心2013年...</a><span>2013-04-17</span></li>
<li> <a target="_blank" title="2012年度国家商用飞机制造工程技术研究中心创新基金项目指南" href="http://116.213.201.133/xwzx/xxgg/201401/11/t20140111_1335445.shtml">2012年度国家商用飞机制造工程技术研究中...</a><span>2012-12-10</span></li>
<li> <a target="_blank" title="中国商飞公司2012年享受政府特殊津贴人员推荐人选的公示" href="http://116.213.201.133/xwzx/xxgg/201401/11/t20140111_1335444.shtml">中国商飞公司2012年享受政府特殊津贴人员...</a><span>2012-06-14</span></li>
<li> <a target="_blank" title="中国商飞公司博士后科研工作站2012年度博士后招收计划" href="http://116.213.201.133/xwzx/xxgg/201401/11/t20140111_1335443.shtml">中国商飞公司博士后科研工作站2012年度博...</a><span>2012-05-22</span></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://www.comac.cc/js/jq.js"></script>
<script type="text/javascript">
$(".tab li").hover(function(){
$(this).addClass("cur").siblings().removeClass("cur");
$(this).find("i").css("right","0px").animate({right:"74px"},500);
$(".tab_nr ul").eq($(this).index()).show().siblings().hide();
},function(){
$(this).find("i").css("right","74px");

}
)
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航