首页 / 脚本样式 / JavaScript / 一些实用的TAB效果第1/2页

<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><META HTTP-EQUIV="imagetoolbar" CONTENT="no"> <STYLE TYPE="text/css"> 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; } </STYLE> <script language="javascript" type="text/JavaScript"> 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"; } }; </script> </HEAD> <BODY onload="set_tab_card（0）;" bgcolor="#FFFFFF" text="#000000" leftmargin="20" topmargin="20"><UL id="TabCard"> <LI onclick="set_tab_card（this）;">用户管理</LI> <LI onclick="set_tab_card（this）;">用户组管理</LI> <LI onclick="set_tab_card（this）;">用户组管理1</LI> </UL>测丶式1 测丶式2 测丶式3 </BODY> </HTML>

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

<html> <head> <title>项目申报</title> <STYLE type="text/css"> 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;} </STYLE> <script LANGUAGE="JavaScript"> 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]="</table><table width=100% CELLPADDING="0" CELLSPACING="0"><tr HEIGHT="20">"; bases[0]=""; for（var i=0;i<labels.length;i++） { menu_len+=labels[i].length; if（menu_len*22>document.body.scrollWidth）{ j++; menus[j]="</table><table width=100% CELLPADDING="0" CELLSPACING="0"><tr HEIGHT="20">"; bases[j]=""; menu_len=0; row_all++; } if（i==col） { menus[j]+="<td ID="t"+i+"" CLASS="selTab">"+labels[i]+"</td>"; bases[j]+="<td ID="t"+i+"base" STYLE="height:2; border-left:solid thin white"></td>"; row=row_all-1; } else { menus[j]+="<td ID="t"+i+"" CLASS="tab">"+labels[i]+"</td>"; bases[j]+="<td ID="t"+i+"base" STYLE="height:2; background-color:white"></td>"; } } for（var i=0;i<row_all;i++） { if（i！=row） menu+=menus[i]+"
"; } menu+=menus[row]; base=bases[row]; frame_height=document.body.scrollHeight-row_all*22; //alert（document.body.scrollHeight）; html+=（"<table STYLE="width:100%; height:100%" CELLPADDING="0" CELLSPACING="0" bgcolor="#d4d0c7">"）; html+=（ menu ）; html+=（"<tr>"）; html+=（ base ）; html+=（"</tr>"）; html+=（"</table>"）; html+=（"<table width="100%" HEIGHT=""+frame_height+"" CELLPADDING="0" CELLSPACING="0">"）; html+=（"<tr>"）; html+=（"<td STYLE="border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin white">"）; html+=（"<iframe frameborder=0 width="100%" height="100%" src=""+linkItem[col]+""></iframe>"）; html+=（"</td>"）; html+=（"</tr>"）; html+=（"</table>"）; return html; } function changeTabs（） { if（window.event.srcElement.className == "tab"） { col=window.event.srcElement.id.replace（/t/i,""）; win.innerHTML=public_Labels（menuItem）; } } </script> </head> <body onload="init（）"> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]当前1/2页 12下一页