一些實(shí)用的TAB效果

更新時(shí)間：2006年11月04日 00:00:00 作者：

<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)">標(biāo)簽一</td> <td class="ooihs" nowrap onclick="ghbq(this)">標(biāo)簽二</td> <td class="ooihs" nowrap onclick="ghbq(this)">標(biāo)簽三</td> <td class="ooihs" nowrap onclick="ghbq(this)">標(biāo)簽四</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> 標(biāo)簽內(nèi)容一     </td>   </tr>   <tr style="display: none">     <td> 標(biāo)簽內(nèi)容二     </td>   </tr>   <tr style="display: none">     <td> 標(biāo)簽內(nèi)容三     </td>   </tr>   <tr style="display: none">     <td> 標(biāo)簽內(nèi)容四     </td>   </tr> </table> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

<HTML> <HEAD> <script> var Num=4;  //這里是增加選項(xiàng)卡的數(shù)目 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,"第一項(xiàng)") mnuItem(2,"圖片世界") mnuItem(3,"第三個(gè)內(nèi)容") 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>第三個(gè)內(nèi)容</h1>"} if(i==4) { span1.innerHTML="<table border=1 width=100%><td>第四個(gè)內(nèi)容，表格</td></tr>" +"<tr><td>aaaaaaaa</td></tr>" +"<tr><td>bbbbbbbb</td></tr>" +"<tr><td>ccccccccc</td></tr></table>" } if(i==5) { span1.innerHTML="<marquee>" +"這是第五個(gè)內(nèi)容" +"啦啦..？</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 id="7y7okgn"    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 id="dspbsy2"    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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

<HTML> <HEAD> <script> var Num=4;  //這里是增加選項(xiàng)卡的數(shù)目 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,"第一項(xiàng)")  mnuItem(2,"圖片世界")  mnuItem(3,"第三個(gè)內(nèi)容")  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>第三個(gè)內(nèi)容</h1>"}  if(i==4)  {  span1.innerHTML="<table border=1 width=100%><td>第四個(gè)內(nèi)容，表格</td></tr>"  +"<tr><td>aaaaaaaa</td></tr>"  +"<tr><td>bbbbbbbb</td></tr>"  +"<tr><td>ccccccccc</td></tr></table>"  }  if(i==5)  {  span1.innerHTML="<marquee>"  +"這是第五個(gè)內(nèi)容"  +"啦啦..？</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 id="sevyg7y"    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 id="rr7nzgs"    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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

<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>  </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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]