金融界的tab选项卡效果。 - 星星猫-技巧&源码收集 [每日更新]
2007-12-05 17:01
387 查看
导读：
金融界的tab选项卡效果。 [ 2007-10-08 08:34:05 | 编辑&整理: admin]
大中小
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">< html>< head>< meta http-equiv="Content-Type" content="text/html; charset=gb2312">< title>无标题文档</title>< style type="text/css"> body { margin: 6px 0px; font: 12px 宋体; text-align: center;}/* 2列 */.divArea3{width:750px;}.divArea3 .divAreaCol1{float:left; width:371px;}.divArea3 .divAreaCol2{float:right; width:280px;}.divArea3Box{ width:100%; height:120px; line-height:120px; padding:2px; margin-top:2px; margin-bottom:2px; border:1px #CCCCCC solid; text-align:center;} a{ color:#999999; text-decoration:none;}/*选项窗*/.tabWin { width: 371px; height: 230px;}.tabWin, .crbl { float: left; border: 1px solid #CCCCCC; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.tabWinInnerBox { width: 361px; height: 220px; margin: 5px; overflow: hidden;}.tabWinLine1 { width: 360px; height: 29px;}.tabWinLine2 {display: block;}.tabWinLine4 {display: none;}.tabWinLine2, .tabWinLine4 { height: 1px; width: 360px;}.tabWinLine2 div, tabWinLine4 div { float: left; background-color: #cccccc; width: 118px; height: 1px;}.tabWinLine1 .sepa, .tabWinLine2 .sepa, .tabWinLine4 .sepa { width: 3px; background-image: url("images/0.gif");}.tabWinLine2 .tabWinLine3, tabWinLine4 tabWinLine3 { background-color: #ffffff; background-repeat: no-repeat;}.tabWinLine1 div { float: left; height: 26px; width: 118px; line-height: 26px; cursor: pointer; background-image: url("images/c21_1.gif"); font-weight: bold; color: #1F3A87;}.tabWinLine1 .tabWinTitle { background-image: url("images/0.gif"); height: 28px; background-color: White; width: 116px; border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; color: #B10000;}.tabWinInnerBox .showblock, .tabWinInnerBox .hiddenblock { height: 143px; width: 348px; border-left: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; background-color: #ffffff; text-align: left; padding: 9px 3px 8px 7px; margin: 0px 0px 3px 0px; overflow: hidden;}.hiddenblock {display: none;}.showblock {display: block;}/*选项卡*/.divTab2 { float: left; width: auto; height: 232px; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.divTab2 .TabTitle { height: 24px; width: 280px; font-size: 12px;}.divTab2 .normal { background-image: url("images/mtitle2.gif"); color: #1F3A87;}.divTab2 .active { background-image: url("images/mtitle1.gif"); font-weight: bold; color: #1F3A87;}.divTab2 .TabTitle .sepa { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle .border { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle div { width: 92px; height: 21px; padding-top: 3px; line-height: 21px; float: left; cursor: pointer;}.divTab2 .showblock, .divTab2 .hiddenblock { text-align: left; padding: 9px 0px 0px 0px; width: 278px; height: 198px; overflow: hidden; border-left: 1px solid #064CA1; border-bottom: 1px solid #064CA1; border-right: 1px solid #064CA1;}</style>< script language="javascript"> var waitInterval; var mouseDelayTime = 200;/*选项窗*/ function tabWinMouseOver(tabWinObj,tabWinTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("ChangeDiv3('"+tabWinObj+"',"+tabWinTotal+","+obj.id+")",mouseDelayTime)} function ChangeDiv3(tabWinObj,tabWinTotal,obj){ var itemNum; for(var i=0;i<tabWinTotal;i++){ if (tabWinObj+"_Title"+i == obj.id){ itemNum = i; document.getElementById(tabWinObj+"_Title"+i).className = "tabWinTitle"; document.getElementById(tabWinObj+"_Line"+i).className = "tabWinLine3"; document.getElementById(tabWinObj+"_Content"+i).className = "showblock"; }else{ var divID = document.getElementById(tabWinObj+"_Title"+i); if (divID != null){divID.className = "";} var ContentDiv = document.getElementById(tabWinObj+"_Content"+i); if(ContentDiv!=null){ContentDiv.className = "hiddenblock";} var BDiv = document.getElementById(tabWinObj+"_Line"+i); if(BDiv!=null){BDiv.className="";}}} var tabWinImg1 = document.getElementById(tabWinObj+"_Img1"); var tabWinImg2 = document.getElementById(tabWinObj+"_Img2"); if(tabWinImg1!=null &&tabWinImg2!=null){ if(itemNum <4){ tabWinImg1.className = "tabWinLine2"; tabWinImg2.className = "tabWinLine4";}else{ tabWinImg1.className = "tabWinLine4"; tabWinImg2.className = "tabWinLine2";}}}/*选项卡*/ function tabMouseOver(tabObj,tabTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("changeTabDiv('"+tabObj+"',"+tabTotal+","+obj.id+")",mouseDelayTime)} function changeTabDiv(tabObj,tabTotal,obj){ for(i=0; i <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">< html>< head>< meta http-equiv="Content-Type" content="text/html; charset=gb2312">< title>无标题文档</title>< style type="text/css"> body { margin: 6px 0px; font: 12px 宋体; text-align: center;}/* 2列 */.divArea3{width:750px;}.divArea3 .divAreaCol1{float:left; width:371px;}.divArea3 .divAreaCol2{float:right; width:280px;}.divArea3Box{ width:100%; height:120px; line-height:120px; padding:2px; margin-top:2px; margin-bottom:2px; border:1px #CCCCCC solid; text-align:center;} a{ color:#999999; text-decoration:none;}/*选项窗*/.tabWin { width: 371px; height: 230px;}.tabWin, .crbl { float: left; border: 1px solid #CCCCCC; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.tabWinInnerBox { width: 361px; height: 220px; margin: 5px; overflow: hidden;}.tabWinLine1 { width: 360px; height: 29px;}.tabWinLine2 {display: block;}.tabWinLine4 {display: none;}.tabWinLine2, .tabWinLine4 { height: 1px; width: 360px;}.tabWinLine2 div, tabWinLine4 div { float: left; background-color: #cccccc; width: 118px; height: 1px;}.tabWinLine1 .sepa, .tabWinLine2 .sepa, .tabWinLine4 .sepa { width: 3px; background-image: url("images/0.gif");}.tabWinLine2 .tabWinLine3, tabWinLine4 tabWinLine3 { background-color: #ffffff; background-repeat: no-repeat;}.tabWinLine1 div { float: left; height: 26px; width: 118px; line-height: 26px; cursor: pointer; background-image: url("images/c21_1.gif"); font-weight: bold; color: #1F3A87;}.tabWinLine1 .tabWinTitle { background-image: url("images/0.gif"); height: 28px; background-color: White; width: 116px; border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; color: #B10000;}.tabWinInnerBox .showblock, .tabWinInnerBox .hiddenblock { height: 143px; width: 348px; border-left: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; background-color: #ffffff; text-align: left; padding: 9px 3px 8px 7px; margin: 0px 0px 3px 0px; overflow: hidden;}.hiddenblock {display: none;}.showblock {display: block;}/*选项卡*/.divTab2 { float: left; width: auto; height: 232px; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.divTab2 .TabTitle { height: 24px; width: 280px; font-size: 12px;}.divTab2 .normal { background-image: url("images/mtitle2.gif"); color: #1F3A87;}.divTab2 .active { background-image: url("images/mtitle1.gif"); font-weight: bold; color: #1F3A87;}.divTab2 .TabTitle .sepa { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle .border { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle div { width: 92px; height: 21px; padding-top: 3px; line-height: 21px; float: left; cursor: pointer;}.divTab2 .showblock, .divTab2 .hiddenblock { text-align: left; padding: 9px 0px 0px 0px; width: 278px; height: 198px; overflow: hidden; border-left: 1px solid #064CA1; border-bottom: 1px solid #064CA1; border-right: 1px solid #064CA1;}</style>< script language="javascript"> var waitInterval; var mouseDelayTime = 200;/*选项窗*/ function tabWinMouseOver(tabWinObj,tabWinTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("ChangeDiv3('"+tabWinObj+"',"+tabWinTotal+","+obj.id+")",mouseDelayTime)} function ChangeDiv3(tabWinObj,tabWinTotal,obj){ var itemNum; for(var i=0;i<tabWinTotal;i++){ if (tabWinObj+"_Title"+i == obj.id){ itemNum = i; document.getElementById(tabWinObj+"_Title"+i).className = "tabWinTitle"; document.getElementById(tabWinObj+"_Line"+i).className = "tabWinLine3"; document.getElementById(tabWinObj+"_Content"+i).className = "showblock"; }else{ var divID = document.getElementById(tabWinObj+"_Title"+i); if (divID != null){divID.className = "";} var ContentDiv = document.getElementById(tabWinObj+"_Content"+i); if(ContentDiv!=null){ContentDiv.className = "hiddenblock";} var BDiv = document.getElementById(tabWinObj+"_Line"+i); if(BDiv!=null){BDiv.className="";}}} var tabWinImg1 = document.getElementById(tabWinObj+"_Img1"); var tabWinImg2 = document.getElementById(tabWinObj+"_Img2"); if(tabWinImg1!=null &&tabWinImg2!=null){ if(itemNum <4){ tabWinImg1.className = "tabWinLine2"; tabWinImg2.className = "tabWinLine4";}else{ tabWinImg1.className = "tabWinLine4"; tabWinImg2.className = "tabWinLine2";}}}/*选项卡*/ function tabMouseOver(tabObj,tabTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("changeTabDiv('"+tabObj+"',"+tabTotal+","+obj.id+")",mouseDelayTime)} function changeTabDiv(tabObj,tabTotal,obj){ for(i=0; i [最后修改由 Admin， 于 2007-10-09 08:01:28]
本文转自
http://www.52hai.com/2005/article.asp?id=1947
金融界的tab选项卡效果。 [ 2007-10-08 08:34:05 | 编辑&整理: admin]
大中小
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">< html>< head>< meta http-equiv="Content-Type" content="text/html; charset=gb2312">< title>无标题文档</title>< style type="text/css"> body { margin: 6px 0px; font: 12px 宋体; text-align: center;}/* 2列 */.divArea3{width:750px;}.divArea3 .divAreaCol1{float:left; width:371px;}.divArea3 .divAreaCol2{float:right; width:280px;}.divArea3Box{ width:100%; height:120px; line-height:120px; padding:2px; margin-top:2px; margin-bottom:2px; border:1px #CCCCCC solid; text-align:center;} a{ color:#999999; text-decoration:none;}/*选项窗*/.tabWin { width: 371px; height: 230px;}.tabWin, .crbl { float: left; border: 1px solid #CCCCCC; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.tabWinInnerBox { width: 361px; height: 220px; margin: 5px; overflow: hidden;}.tabWinLine1 { width: 360px; height: 29px;}.tabWinLine2 {display: block;}.tabWinLine4 {display: none;}.tabWinLine2, .tabWinLine4 { height: 1px; width: 360px;}.tabWinLine2 div, tabWinLine4 div { float: left; background-color: #cccccc; width: 118px; height: 1px;}.tabWinLine1 .sepa, .tabWinLine2 .sepa, .tabWinLine4 .sepa { width: 3px; background-image: url("images/0.gif");}.tabWinLine2 .tabWinLine3, tabWinLine4 tabWinLine3 { background-color: #ffffff; background-repeat: no-repeat;}.tabWinLine1 div { float: left; height: 26px; width: 118px; line-height: 26px; cursor: pointer; background-image: url("images/c21_1.gif"); font-weight: bold; color: #1F3A87;}.tabWinLine1 .tabWinTitle { background-image: url("images/0.gif"); height: 28px; background-color: White; width: 116px; border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; color: #B10000;}.tabWinInnerBox .showblock, .tabWinInnerBox .hiddenblock { height: 143px; width: 348px; border-left: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; background-color: #ffffff; text-align: left; padding: 9px 3px 8px 7px; margin: 0px 0px 3px 0px; overflow: hidden;}.hiddenblock {display: none;}.showblock {display: block;}/*选项卡*/.divTab2 { float: left; width: auto; height: 232px; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.divTab2 .TabTitle { height: 24px; width: 280px; font-size: 12px;}.divTab2 .normal { background-image: url("images/mtitle2.gif"); color: #1F3A87;}.divTab2 .active { background-image: url("images/mtitle1.gif"); font-weight: bold; color: #1F3A87;}.divTab2 .TabTitle .sepa { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle .border { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle div { width: 92px; height: 21px; padding-top: 3px; line-height: 21px; float: left; cursor: pointer;}.divTab2 .showblock, .divTab2 .hiddenblock { text-align: left; padding: 9px 0px 0px 0px; width: 278px; height: 198px; overflow: hidden; border-left: 1px solid #064CA1; border-bottom: 1px solid #064CA1; border-right: 1px solid #064CA1;}</style>< script language="javascript"> var waitInterval; var mouseDelayTime = 200;/*选项窗*/ function tabWinMouseOver(tabWinObj,tabWinTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("ChangeDiv3('"+tabWinObj+"',"+tabWinTotal+","+obj.id+")",mouseDelayTime)} function ChangeDiv3(tabWinObj,tabWinTotal,obj){ var itemNum; for(var i=0;i<tabWinTotal;i++){ if (tabWinObj+"_Title"+i == obj.id){ itemNum = i; document.getElementById(tabWinObj+"_Title"+i).className = "tabWinTitle"; document.getElementById(tabWinObj+"_Line"+i).className = "tabWinLine3"; document.getElementById(tabWinObj+"_Content"+i).className = "showblock"; }else{ var divID = document.getElementById(tabWinObj+"_Title"+i); if (divID != null){divID.className = "";} var ContentDiv = document.getElementById(tabWinObj+"_Content"+i); if(ContentDiv!=null){ContentDiv.className = "hiddenblock";} var BDiv = document.getElementById(tabWinObj+"_Line"+i); if(BDiv!=null){BDiv.className="";}}} var tabWinImg1 = document.getElementById(tabWinObj+"_Img1"); var tabWinImg2 = document.getElementById(tabWinObj+"_Img2"); if(tabWinImg1!=null &&tabWinImg2!=null){ if(itemNum <4){ tabWinImg1.className = "tabWinLine2"; tabWinImg2.className = "tabWinLine4";}else{ tabWinImg1.className = "tabWinLine4"; tabWinImg2.className = "tabWinLine2";}}}/*选项卡*/ function tabMouseOver(tabObj,tabTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("changeTabDiv('"+tabObj+"',"+tabTotal+","+obj.id+")",mouseDelayTime)} function changeTabDiv(tabObj,tabTotal,obj){ for(i=0; i <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">< html>< head>< meta http-equiv="Content-Type" content="text/html; charset=gb2312">< title>无标题文档</title>< style type="text/css"> body { margin: 6px 0px; font: 12px 宋体; text-align: center;}/* 2列 */.divArea3{width:750px;}.divArea3 .divAreaCol1{float:left; width:371px;}.divArea3 .divAreaCol2{float:right; width:280px;}.divArea3Box{ width:100%; height:120px; line-height:120px; padding:2px; margin-top:2px; margin-bottom:2px; border:1px #CCCCCC solid; text-align:center;} a{ color:#999999; text-decoration:none;}/*选项窗*/.tabWin { width: 371px; height: 230px;}.tabWin, .crbl { float: left; border: 1px solid #CCCCCC; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.tabWinInnerBox { width: 361px; height: 220px; margin: 5px; overflow: hidden;}.tabWinLine1 { width: 360px; height: 29px;}.tabWinLine2 {display: block;}.tabWinLine4 {display: none;}.tabWinLine2, .tabWinLine4 { height: 1px; width: 360px;}.tabWinLine2 div, tabWinLine4 div { float: left; background-color: #cccccc; width: 118px; height: 1px;}.tabWinLine1 .sepa, .tabWinLine2 .sepa, .tabWinLine4 .sepa { width: 3px; background-image: url("images/0.gif");}.tabWinLine2 .tabWinLine3, tabWinLine4 tabWinLine3 { background-color: #ffffff; background-repeat: no-repeat;}.tabWinLine1 div { float: left; height: 26px; width: 118px; line-height: 26px; cursor: pointer; background-image: url("images/c21_1.gif"); font-weight: bold; color: #1F3A87;}.tabWinLine1 .tabWinTitle { background-image: url("images/0.gif"); height: 28px; background-color: White; width: 116px; border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; color: #B10000;}.tabWinInnerBox .showblock, .tabWinInnerBox .hiddenblock { height: 143px; width: 348px; border-left: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; background-color: #ffffff; text-align: left; padding: 9px 3px 8px 7px; margin: 0px 0px 3px 0px; overflow: hidden;}.hiddenblock {display: none;}.showblock {display: block;}/*选项卡*/.divTab2 { float: left; width: auto; height: 232px; margin: 0px 3px 0px 3px; display: inline; overflow: hidden;}.divTab2 .TabTitle { height: 24px; width: 280px; font-size: 12px;}.divTab2 .normal { background-image: url("images/mtitle2.gif"); color: #1F3A87;}.divTab2 .active { background-image: url("images/mtitle1.gif"); font-weight: bold; color: #1F3A87;}.divTab2 .TabTitle .sepa { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle .border { width: 1px; background-image: url("images/speabg.gif");}.divTab2 .TabTitle div { width: 92px; height: 21px; padding-top: 3px; line-height: 21px; float: left; cursor: pointer;}.divTab2 .showblock, .divTab2 .hiddenblock { text-align: left; padding: 9px 0px 0px 0px; width: 278px; height: 198px; overflow: hidden; border-left: 1px solid #064CA1; border-bottom: 1px solid #064CA1; border-right: 1px solid #064CA1;}</style>< script language="javascript"> var waitInterval; var mouseDelayTime = 200;/*选项窗*/ function tabWinMouseOver(tabWinObj,tabWinTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("ChangeDiv3('"+tabWinObj+"',"+tabWinTotal+","+obj.id+")",mouseDelayTime)} function ChangeDiv3(tabWinObj,tabWinTotal,obj){ var itemNum; for(var i=0;i<tabWinTotal;i++){ if (tabWinObj+"_Title"+i == obj.id){ itemNum = i; document.getElementById(tabWinObj+"_Title"+i).className = "tabWinTitle"; document.getElementById(tabWinObj+"_Line"+i).className = "tabWinLine3"; document.getElementById(tabWinObj+"_Content"+i).className = "showblock"; }else{ var divID = document.getElementById(tabWinObj+"_Title"+i); if (divID != null){divID.className = "";} var ContentDiv = document.getElementById(tabWinObj+"_Content"+i); if(ContentDiv!=null){ContentDiv.className = "hiddenblock";} var BDiv = document.getElementById(tabWinObj+"_Line"+i); if(BDiv!=null){BDiv.className="";}}} var tabWinImg1 = document.getElementById(tabWinObj+"_Img1"); var tabWinImg2 = document.getElementById(tabWinObj+"_Img2"); if(tabWinImg1!=null &&tabWinImg2!=null){ if(itemNum <4){ tabWinImg1.className = "tabWinLine2"; tabWinImg2.className = "tabWinLine4";}else{ tabWinImg1.className = "tabWinLine4"; tabWinImg2.className = "tabWinLine2";}}}/*选项卡*/ function tabMouseOver(tabObj,tabTotal,obj){ window.clearTimeout(waitInterval); waitInterval=window.setTimeout("changeTabDiv('"+tabObj+"',"+tabTotal+","+obj.id+")",mouseDelayTime)} function changeTabDiv(tabObj,tabTotal,obj){ for(i=0; i [最后修改由 Admin， 于 2007-10-09 08:01:28]
本文转自
http://www.52hai.com/2005/article.asp?id=1947
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ios开发学习--选项卡（Tab Bar） 效果源码分享--系列教程
- JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
- ios开发学习--选项卡（Tab Bar） 效果源码分享--系列教程
- ios开发学习--选项卡（Tab Bar） 效果源码分享--系列教程
- js实现Tab选项卡切换效果
- ios每日源码，侧滑菜单精美动画曲线表弹性碰撞效果视频播放器渐变背景动画效果源码
- ios每日源码，侧滑菜单精美动画曲线表弹性碰撞效果视频播放器渐变背景动画效果源码
- jQuery源码分析学习--资料收集--更新中
- 【<私活案例1>】 某游戏网首页PS设计和Html静态效果源码
- 易犯的错误&各种技巧（实时更新）
- 【源码分享下载】每日更新之Android应用源码之仿微信5.2布局
- 简单纯js实现网页tab选项卡切换效果
- 转载 37个Ajax和CSS实现的Tab选项卡切换效果界面
- TabLayout+ViewPager实现选项卡动态滑动效果
- 图书收集和整理技巧汇总【持续更新…
- 猎豹"快切App"中用到的Android开发技巧探索[附源码]
- ie和ff下<a>更新<iframe>的src导致打开新选项卡或者新窗口
- jQuery简单实现tab选项卡切换效果
- Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果
- 用TabLayout实现选项卡滑动效果