一些实用的TAB效果_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:33:38

一些实用的TAB效果_javascript技巧

一些实用的TAB效果_javascript技巧:一些实用的TAB效果_javascript技巧无标题文档项目申报 New Document window<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="t

推荐度：

点击下载本文 文档为doc格式

导读一些实用的TAB效果_javascript技巧:一些实用的TAB效果_javascript技巧无标题文档项目申报 New Document window<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="t

一些实用的TAB效果_javascript技巧无标题文档项目申报 New Document window

<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"> 
<DIV id="TabStrip"> 
 <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> 
 <DIV id="TabBody"> 
 <DIV>测丶式1</DIV> 
 <DIV>测丶式2</DIV> 
 <DIV>测丶式3</DIV> 
 </DIV> 
</DIV> 
</BODY> 
</HTML>

<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]+"\n"; 
 } 

 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()"> 
<div id="win" STYLE="position:absolute; top:0; left:10; height:100%; width:100%; border:none thin gray"> 
</div> 
</body> 
</html>

<html> 
<head> 
<title> New Document </title> 
<style> 
td { font-family: 宋体; font-size: 9pt;} 
.ooib { border-width: 1px; border-style: none solid solid; 
border-color: #CC3333; background-color: #E4E5EE;} 
.ooih td { border-width: 1px; padding: 0 5; } 
.ooihj { color: #CC3333; background-color: #E4E5EE; 
border-style: solid solid none; border-color: #CC3333; cursor: hand} 
.ooihs { color: #6600CC; background-color: #ccccFF; 
border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand} 
.ooihx { border-style: none none solid; border-color: #CC3333; } 

</style> 
<script language="JavaScript"> 
function ghbq(td) 
{ 
 var tr = td.parentElement.cells; 
 var ob = obody.rows; 
 for(var ii=0; ii<tr.length-1; ii++) 
 { 
 tr[ii].className = (td.cellIndex==ii)?"ooihj":"ooihs"; 
 ob[ii].style.display = (td.cellIndex==ii)?"block":"none"; 
 } 
} 
</script> 
</head> 

<body> 

<table class="ooih" border="0" cellspacing="0" cellpadding="0" width="400" height="19"> 
 <tr> 
<td class="ooihj" nowrap onclick="ghbq(this)">标签一</td> 
<td class="ooihs" nowrap onclick="ghbq(this)">标签二</td> 
<td class="ooihs" nowrap onclick="ghbq(this)">标签三</td> 
<td class="ooihs" nowrap onclick="ghbq(this)">标签四</td> 
<td class="ooihx" width="100%"> </td> 
 </tr> 
</table> 
<table class="ooib" id="obody" border="0" cellspacing="0" cellpadding="0" width="400" height="300"> 
 <tr> 
 <td> 
标签内容一 
 </td> 
 </tr> 
 <tr style="display: none"> 
 <td> 
标签内容二 
 </td> 
 </tr> 
 <tr style="display: none"> 
 <td> 
标签内容三 
 </td> 
 </tr> 
 <tr style="display: none"> 
 <td> 
标签内容四 
 </td> 
 </tr> 
</table> 

</body> 
</html>

<HTML> 
<HEAD> 
<script> 
var Num=4; //这里是增加选项卡的数目 
var carNum=2+Num 
function document.onselectstart() 
{ 
var obj=event.srcElement 
if(obj.tagName=="SPAN") 
{ 
return false; 
} 
} 
function document.onmousedown() 
{ 
var obj=event.srcElement 
var pobj=obj.parentElement.id; 
if(obj.className=="span") 
{ 
 for(i=1;i<carNum;i++) 
 { 
 if(pobj==("btn"+i)) 
 { 
 document.all("td"+i).style.backgroundColor="green" 
 document.all("btn"+i).style.height=20 
 content(i) 
 } 
 else 
 { 
 document.all("td"+i).style.backgroundColor="white" 
 document.all("btn"+i).style.height=18 
 } 
 } 
} 
} 
function content(i) 
{ 
//这里是菜单名 
mnuItem(1,"第一项") 
mnuItem(2,"图片世界") 
mnuItem(3,"第三个内容") 
mnuItem(4,"表格") 
mnuItem(5,"滚动字幕") 
//End 
if(i==1) 
{ 
span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女
" 
+"<input>
<input>
<input type=submit>" 
} 
if(i==2) 
{ 
span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>" 
} 
if(i==3) 
{ 
span1.innerHTML="<h1>第三个内容</h1>"} 
if(i==4) 
{ 
span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>" 
+"<tr><td>aaaaaaaa</td></tr>" 
+"<tr><td>bbbbbbbb</td></tr>" 
+"<tr><td>ccccccccc</td></tr></table>" 
} 
if(i==5) 
{ 
span1.innerHTML="<marquee>" 
+"这是第五个内容" 
+"啦啦..？</marquee>" 
} 
} 
function mnuItem(i,con) 
{ 
document.all("MenuName"+i).innerText=con 
} 
</script> 
<style>td{font-size:9pt} 
.span{ 
cursor:default; 
padding-left:5; 
padding-top:2; 
padding-right:5; 
padding-bottom:0; 
width:100%; 
height:100%; 
color: yellow; 
background-color: green; 
} 
</style> 
<TITLE></TITLE> 
<META http-equiv="content-type" content="text/html;charset=gb2312"> 
</HEAD> 
<BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false"> 
<p> 
<table width=0 onselectstart="return false" bgcolor=green align=center><tr><td> 
<table cellpadding=0 cellspacing=0 onselectstart="return false"> 
 <tr height=20> 
<td valign=bottom> 
 <table cellspacing=0 cellpadding=0 bgcolor=green> 
 <tr> 
 <td width=1 height=1></td><td width=1 height=1></td> 
 <td bgcolor=white></td><td></td><td></td> 
 </tr> 
 <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td> 
 <td></td><td bgcolor=black></td><td></td> 
 </tr> 
 <tr><td width=1 bgcolor=white></td><td width=1 height=1></td> 
 <td id=btn1 height=20><span class=span id=MenuName1> </span></td>
 <td width=1 bgcolor=gray></td><td bgcolor=black width=1></td> 
 </tr> 
 <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=green id=td1></td> 
 </tr> 
 </table> 
</td> 
<script> 
for(i=2;i<carNum;i++) 
{ 
tdBody="<td valign=bottom>" 
tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=green>" 
tdBody+="<tr>" 
tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>" 
tdBody+="<td bgcolor=white><\/td><td></td><td></td>" 
tdBody+="<\/tr>" 
tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>" 
tdBody+="<td></td><td bgcolor=black><\/td><td></td>" 
tdBody+="<\/tr>" 
tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>" 
tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <\/span></td>
<td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>" 
tdBody+="<\/tr>" 
tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>" 
tdBody+="<\/tr>" 
tdBody+="<\/table>" 
tdBody+="<\/td>"; 
document.write(tdBody) 
} 
</script> 
</td> 
<td style="border-bottom:1 white solid" width=50> </td> </tr> 
</table> 
<div style="padding:10;width:100%;height:200;
border-left:1 white solid;border-right:2 outset;border-bottom:2 outset"> 
<span id=span1></span><!--这里是内容--> 
</div> 
</td></tr></table> 
</BODY> 
</HTML>

<HTML> 
<HEAD> 
<script> 
var Num=4; //这里是增加选项卡的数目 
var carNum=2+Num 
function document.onselectstart() 
{ 
var obj=event.srcElement 
 if(obj.tagName=="SPAN") 
 { 
 return false; 
 } 
} 
function document.onmousedown() 
{ 
 var obj=event.srcElement 
 var pobj=obj.parentElement.id; 
 if(obj.className=="span") 
 { 
 for(i=1;i<carNum;i++) 
 { 
 if(pobj==("btn"+i)) 
 { 
 document.all("td"+i).style.backgroundColor="menu" 
 document.all("btn"+i).style.height=20 
 content(i) 
 } 
 else 
 { 
 document.all("td"+i).style.backgroundColor="white" 
 document.all("btn"+i).style.height=18 
 } 
 } 
 } 
} 
function content(i) 
{ 
//这里是菜单名 
 mnuItem(1,"第一项") 
 mnuItem(2,"图片世界") 
 mnuItem(3,"第三个内容") 
 mnuItem(4,"表格") 
 mnuItem(5,"滚动字幕") 
//End 
 if(i==1) 
 { 
 span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女
" 
 +"<input>
<input>
<input type=submit>" 
 } 
 if(i==2) 
 { 
 span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>" 
 } 
 if(i==3) 
 { 
 span1.innerHTML="<h1>第三个内容</h1>"} 
 if(i==4) 
 { 
 span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>" 
 +"<tr><td>aaaaaaaa</td></tr>" 
 +"<tr><td>bbbbbbbb</td></tr>" 
 +"<tr><td>ccccccccc</td></tr></table>" 
 } 
 if(i==5) 
 { 
 span1.innerHTML="<marquee>" 
 +"这是第五个内容" 
 +"啦啦..？</marquee>" 
 } 
} 
function mnuItem(i,con) 
{ 
 document.all("MenuName"+i).innerText=con 
} 
</script> 
<style>td{font-size:9pt} 
.span{ 
 cursor:default; 
 padding-left:5; 
 padding-top:2; 
 padding-right:5; 
 padding-bottom:0; 
 width:100%; 
 height:100%; 
 } 
</style> 
<TITLE></TITLE> 
<META http-equiv="content-type" content="text/html;charset=gb2312"> 
</HEAD> 
<BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false"> 
<p> 
<table width=0 onselectstart="return false" bgcolor=menu align=center><tr><td> 
<table cellpadding=0 cellspacing=0 onselectstart="return false"> 
 <tr height=20> 
 <td valign=bottom> 
 <table cellspacing=0 cellpadding=0 bgcolor=menu> 
 <tr> 
 <td width=1 height=1></td><td width=1 height=1></td> 
 <td bgcolor=white></td><td></td><td></td> 
 </tr> 
 <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td> 
 <td></td><td bgcolor=black></td><td></td> 
 </tr> 
 <tr><td width=1 bgcolor=white></td><td width=1 height=1></td> 
 <td id=btn1 height=20><span class=span id=MenuName1> </span></td><td width=1 bgcolor=gray></td>
 <td bgcolor=black width=1></td> 
 </tr> 
 <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=menu id=td1></td> 
 </tr> 
 </table> 
 </td> 
 <script> 
for(i=2;i<carNum;i++) 
{ 
 tdBody="<td valign=bottom>" 
 tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>" 
 tdBody+="<tr>" 
 tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>" 
 tdBody+="<td bgcolor=white><\/td><td></td><td></td>" 
 tdBody+="<\/tr>" 
 tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>" 
 tdBody+="<td></td><td bgcolor=black><\/td><td></td>" 
 tdBody+="<\/tr>" 
 tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>" 
 tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <\/span></td>
 <td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>" 
 tdBody+="<\/tr>" 
 tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>" 
 tdBody+="<\/tr>" 
 tdBody+="<\/table>" 
 tdBody+="<\/td>"; 
document.write(tdBody) 
} 
</script> 
</td> 
<td style="border-bottom:1 white solid" width=50> </td> </tr> 
</table> 
<div style="padding:10;width:100%;height:200;
border-left:1 white solid;border-right:2 outset;border-bottom:2 outset"> 
<span id=span1></span><!--这里是内容--> 
</div> 
</td></tr></table> 
</BODY> 
</HTML>

<html> 

<head> 
<title>window</title> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 

<style type=text/css> 
td { 
 font-size: 12px; 
 font-family:arial; 
 color: #000000; 
 line-height: 150%; 
 } 
.sec1 { 
 background-color: #EEEEEE; 
 cursor: hand; 
 color: #000000; 
 border-left: 1px solid #FFFFFF; 
 border-top: 1px solid #FFFFFF; 
 border-right: 1px solid gray; 
 border-bottom: 1px solid #FFFFFF 
 } 

.sec2 { 
 background-color: #E4EAF8; 
 cursor: hand; 
 color: #000000; 
 border-left: 1px solid #FFFFFF; 
 border-top: 1px solid #FFFFFF; 
 border-right: 1px solid gray; 
 font-weight: bold; 
 } 

.main_tab { 
 background-color: #E4EAF8; 
 color: #000000; 
 border-left:1px solid #FFFFFF; 
 border-right: 1px solid gray; 
 border-bottom: 1px solid gray; 
 } 
</style> 

<script language=javascript> 
<!-- 
 function secBoard(n) { 
 for(i=0; i<secTable.cells.length; i++){ 
 secTable.cells[i].className="sec1"; 
 } 

 secTable.cells[n].className="sec2"; 

 for(i=0; i<mainTable.tBodies.length; i++){ 
 mainTable.tBodies[i].style.display="none"; 
 } 

 mainTable.tBodies[n].style.display="block"; 
 } 
//--> 
</script> 

</head> 


<body> 

 <table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable> 
 <tr height=20 align=center> 
 <td class=sec2 width=10% onclick="secBoard(0)">General Information</td> 
 <td class=sec1 width=10% onclick="secBoard(1)">Team</td> 
 <td class=sec1 width=10% onclick="secBoard(2)">Documentation</td> 
 <td class=sec1 width=10% onclick="secBoard(3)">Test Report</td> 
 </tr> 
 </table> 

 <table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab> 
 <tbody style="display:block;"> 
 <tr> 
 <td align=center valign=top> 
 
 text </td> 
 </tr> 
 </tbody> 
 <tbody style="display:none;"> 
 <tr> 
 <td align=center valign=top> 
 
 
 
 text1 </td> 
 </tr> 
 </tbody> 
 <tbody style="display:none;"> 
 <tr> 
 <td align=center valign=top> 

 text2 </td> 
 </tr> 
 </tbody> 
 <tbody style="display:none;"> 
 <tr> 
 <td align=center valign=top> 

 text3 </td> 
 </tr> 
 </tbody> 
 </table> 
 </body> 
</html>

一些实用的TAB效果_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：常用 js 效果

热门焦点

一些实用的TAB效果_javascript技巧

一些实用的TAB效果_javascript技巧

一些实用的TAB效果_javascript技巧

最新推荐

猜你喜欢

热门推荐