지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

몇 가지 실용적인 TAB 효과_javascript 기술

PHP中文网
풀어 주다： 2016-05-16 19:24:48
원래의
946명이 탐색했습니다.

무제 문서 프로젝트 선언을 위한 몇 가지 실용적인 TAB 효과_javascript 기술 새 문서 창

<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(&#39;div&#39;); 
        var b    = document.createElement(&#39;b&#39;); 
        with(div.style){position = &#39;absolute&#39;;zIndex = &#39;99999&#39;;
        borderTop=&#39;1px #FFF solid&#39;;width =&#39;98px&#39;;height = &#39;1px&#39;;pixelTop = &#39;-100&#39;;pixelLeft = &#39;-100&#39;;} 
        div.id=&#39;_CARD_HR_&#39;; 
        div.appendChild(b); 
        document.body.insertAdjacentElement(&#39;afterBegin&#39;, div); 
    }; 

    function set_tab_card(TabIndex){ 
        var tab = document.getElementById(&#39;TabCard&#39;); 
        var bod = document.getElementById(&#39;TabBody&#39;); 
        var car = (typeof(TabIndex) != &#39;object&#39;)?tab.children[TabIndex]:TabIndex; 
        var X_Y = getIE(car); 
        if(typeof(_CARD_HR_) == &#39;undefined&#39;)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)?&#39;#FFF&#39;:&#39;#CCC&#39;; 
            bod.children[i].style.display = (tab.children[i] == car)?&#39;block&#39;:&#39;none&#39;; 
        } 
    }; 
</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=[&#39;1、申报基本信息&#39;,&#39;2、省技术创新项目申请表&#39;,&#39;3、技术创新项目立项建议书封面&#39;,&#39;
4、项目开发的目的、意义及必要性&#39;,&#39;5、国际水平、现状及发展趋势&#39;,&#39;6、国内产品与技术发展水平、现状&#39;,&#39;
7、项目前期研发及技术准备情况&#39;,&#39;8、项目产业化实施方案&#39;,&#39;9、项目进度安排与完成期限&#39;,&#39;10、技术经济指标&#39;,&#39;
11、项目资金安排情况&#39;,&#39;12、进口设备仪器情况&#39;,&#39;13、社会、经济效益评价&#39;,&#39;14、项目承担单位及项目协作单位情况&#39;,&#39;
15、其它需要说明的问题&#39;,&#39;格式及填写说明&#39;]; 

var linkItem=[&#39;1.jsp&#39;,&#39;2.jsp&#39;,&#39;3.jsp&#39;,&#39;4.jsp&#39;,&#39;5.jsp&#39;,&#39;6.jsp&#39;,&#39;7.jsp&#39;,&#39;8.jsp&#39;,&#39;9.jsp&#39;,&#39;10.jsp&#39;,&#39;11.jsp&#39;,&#39;
12.jsp&#39;,&#39;13.jsp&#39;,&#39;14.jsp&#39;,&#39;15.jsp&#39;,&#39;16.jsp&#39;]; 
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]=&#39;</table><table width=100% CELLPADDING=\"0\" CELLSPACING=\"0\"><tr HEIGHT=\"20\">&#39;; 
    bases[0]=&#39;&#39;; 

    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=&#39;100%&#39; height=&#39;100%&#39; src=&#39;"+linkItem[col]+"&#39;></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,&#39;&#39;); 
        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 effect_javascript 스킬 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


관련 라벨：
TAB效果，javascript
원천：php.cn
이전 기사：value_javascript 기술을 전달하는 함수 가져오기 다음 기사：매우 멋진 카운트다운_시간 및 날짜
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
사이트에 CSS 스타일이 적용되지 않음 Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경...
에서 2024-04-06 17:12:23
0
1
336
0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까? 제가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다. 이 코드펜에서(잘못된 코드를 양해해 주세요. 그냥 장난을 쳤을 뿐입니다) ...
에서 2024-04-06 16:29:50
0
2
490
잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...
에서 2024-04-06 16:25:39
0
1
346
JavaScript 기능은 버튼 클릭에 영향을 주지 않습니다. 인터넷을 검색하고 많은 것을 시도했지만 비교적 간단한 문제에 봉착했습니다. 아래 코드는 내 문제의 전체 범위입니다. <script>//전체 행을 다른 ...
에서 2024-04-05 13:14:53
0
2
1433
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿