一些实用的TAB效果

更新时间：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)">标签一</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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

<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需再刷新一下页面才能执行]

一些实用的TAB效果

微信小程序vant弹窗组件的实现方式
这篇文章主要介绍了小程序vant弹窗组件的实现方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
js手机号批量滚动抽奖实现代码
这篇文章主要为大家详细介绍了js手机号批量滚动抽奖实现代码，s适用于年会等活动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JS document form表单元素操作完整示例
这篇文章主要介绍了JS document form表单元素操作,结合完整实例形式详细分析了JavaScript form表单元素获取、输出、遍历等相关操作技巧,需要的朋友可以参考下
2020-01-01
JS实现搜索框文字可删除功能
本文给大家分享一段js代码实现搜索框文字可删除功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2016-12-12
JS实现获取GIF总帧数的方法详解
如何通过js在上传前就拿到它的总帧数来判断呢？本文就跟大家分享一种解决方案，并将其封装成插件发布至npm仓库，快跟随小编一起学习一下吧
2022-05-05
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
下面小编就为大家带来一篇让DIV的滚动条自动滚动到最底部的3种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
微信小程序实现换肤功能
这篇文章主要为大家详细介绍了微信小程序实现换肤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03
textbox右键菜单
textbox右键菜单...
2006-10-10
易被忽视的js事件问题总结
这篇文章主要为大家详细介绍了易被忽视的js事件问题，包括跨平台事件、冒泡中target和currentTarget的区别，感兴趣的朋友可以参考一下
2016-05-05
微信小程序实现带刻度尺滑块功能
这篇文章主要介绍了微信小程序实现带刻度尺滑块功能，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

一些实用的TAB效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具