一些实用的TAB效果第1/2页
一些实用的TAB效果第1/2页
发布时间:2016-12-30 来源:查字典编辑
摘要:无标题文档a,a:link{text-decoration:none;color:#000000;font-size:9pt;}a:visi...

无标题文档 a, a:link{text-decoration: none; color:#000000; font-size:9pt;} a:visited{text-decoration: none; color:#000000;} a:hover{text-decoration: underline; color:red;} BODY, TD, Select{FONT-SIZE:9pt; FONT-FAMILY:"宋体";} #TabStrip {width:500px;background-color:#66CCFF;padding:10px;} #TabStrip #TabCard{width:90%;margin:0px;list-style-type: none;} #TabStrip #TabCard LI { float:left; width:100px; height:20px; padding-top:4px; border:1px #7d7d7d solid; border-bottom:none; background-color:#CCC; text-align:center; cursor:default; position:relative; margin:1px; } #TabStrip #TabBody DIV{ display:none; border:1px #7d7d7d solid; background-color:#FFF; width:100%; height:400px; padding:5px; margin-left:2px; } function getIE(obj){ var t=obj.offsetTop - obj.parentElement.scrollTop; var l=obj.offsetLeft - obj.parentElement.scrollLeft; while(obj=obj.offsetParent){ t+=obj.offsetTop - obj.parentElement.scrollTop; l+=obj.offsetLeft - obj.parentElement.scrollLeft; } return {top: t, left:l} }; function create_div(){ var div = document.createElement('div'); var b = document.createElement('b'); with(div.style){position = 'absolute';zIndex = '99999';borderTop='1px #FFF solid';width ='98px';height = '1px';pixelTop = '-100';pixelLeft = '-100';} div.id='_CARD_HR_'; div.appendChild(b); document.body.insertAdjacentElement('afterBegin', div); }; function set_tab_card(TabIndex){ var tab = document.getElementById('TabCard'); var bod = document.getElementById('TabBody'); var car = (typeof(TabIndex) != 'object')?tab.children[TabIndex]:TabIndex; var X_Y = getIE(car); if(typeof(_CARD_HR_) == 'undefined')create_div(); _CARD_HR_.style.pixelTop = X_Y.top+20; _CARD_HR_.style.pixelLeft = X_Y.left+1; for(var i=0; i < tab.children.length; i++){ tab.children[i].style.backgroundColor = (tab.children[i] == car)?'#FFF':'#CCC'; bod.children[i].style.display = (tab.children[i] == car)?'block':'none'; } }; 用户管理 用户组管理 用户组管理1 测丶式1 测丶式2 测丶式3

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

项目申报 body,td{ font-size:12px; color:#000000; background-color:threedface; vertical-align: middle; } .checkbox{width:12px;height:12px;} .cked{ margin:0px;padding:0px;width:100%;display:block;background-color:highlight;color:highlighttext; } .nock{ margin:0px;padding:0px;width:100%;display:block; } .tab { cursor:hand; border-top:solid thin white; border-right:solid thin gray; border-left:solid thin threedface; font-family:Verdana; font-size:10pt; text-align:center; font-weight:normal} .selTab { border-left:solid thin white; border-top:solid thin white; border-right:solid thin gray; font-size:10pt; font-weight:bold; text-align:center} .td_no_bottom { width:100%; height:100%; border-color:white; border-bottom:0} .td_top_right { width:100%; height:100%; border-color:white; border-bottom:0; border-left:0} .td_no_left { width:100%; height:100%; border-color:white; border-left:0} .td_all { width:100%; height:100%; border-color:white} .title { font-size:16px; font-weight:bold;} .tips { background-color:transparent; border:0; color:#990000; font-size:14px;} var menuItem=['1、申报基本信息','2、省技术创新项目申请表','3、技术创新项目立项建议书封面','4、项目开发的目的、意义及必要性','5、国际水平、现状及发展趋势','6、国内产品与技术发展水平、现状','7、项目前期研发及技术准备情况','8、项目产业化实施方案','9、项目进度安排与完成期限','10、技术经济指标','11、项目资金安排情况','12、进口设备仪器情况','13、社会、经济效益评价','14、项目承担单位及项目协作单位情况','15、其它需要说明的问题','格式及填写说明']; var linkItem=['1.jsp','2.jsp','3.jsp','4.jsp','5.jsp','6.jsp','7.jsp','8.jsp','9.jsp','10.jsp','11.jsp','12.jsp','13.jsp','14.jsp','15.jsp','16.jsp']; var col=0; function init(c) { if(isNaN(c)) col=0; else col=Math.floor(c); win.innerHTML=public_Labels(menuItem); document.body.onclick=changeTabs; window.onresize=function(){win.innerHTML=public_Labels(menuItem);} } function public_Labels(labels) { var html=""; var menus=[]; var menu=""; var base=""; var bases=[]; var row=0; var row_all=1; var j=0; var menu_len=0; var frame_height=0; menus[0]='

'; bases[0]=''; for(var i=0;idocument.body.scrollWidth) { j++; menus[j]="
"; bases[j]=""; menu_len=0; row_all++; } if(i==col) { menus[j]+="
"+labels[i]+""; bases[j]+=""; row=row_all-1; } else { menus[j]+=""+labels[i]+""; bases[j]+=""; } } for(var i=0;i

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读