歌特中国的心灵再次经历洗礼
document.getElementById使用方法1

22nd

2008,03

选项卡制作教程,选项卡源代码

Web实例cngothic

选项卡制作教程,选项卡代/源码
网上关于选项卡制作教程,选项卡代/源码五花八门.今Cngothic把自己收录的一个选项卡代/源码共享下.
共四例使用同一个代码.只是CSS样式有部分修改.

  1. <!--JavaScript部分-->
  2. <SCRIPT language=javascript>
  3. function secBoard(n)
  4. {
  5. for(i=0;i<secTable.cells.length;i++)
  6. secTable.cells[i].className="sec1";
  7. secTable.cells[n].className="sec2";
  8. for(i=0;i<mainTable.tBodies.length;i++)
  9. mainTable.tBodies[i].style.display="none";
  10. mainTable.tBodies[n].style.display="block";
  11. }
  12. </SCRIPT>

  1. <STYLE type=text/css>
  2. #secTable {
  3. border: #95C2EE solid;
  4. border-width:1px 1px 0 1px;
  5. }
  6. .sec1 {
  7. width: 120px;
  8. text-align:center;
  9. font:12px #00007F;
  10. border-bottom:1px #95C2EE solid;
  11. background:#EAF3FD;
  12. border-right:1px #95C2EE solid;
  13.  
  14. }
  15. .sec2 {
  16. width: 120px;
  17. text-align:center;
  18. font:bold 12px #ff0000;
  19. height:27px;
  20. border-right:1px #95C2EE solid;
  21. }
  22. .sec3 {
  23. background:#EAF3FD;
  24. border-bottom:#95C2EE 1px solid;
  25. }
  26.  
  27. .main_tab {
  28. border: #95C2EE solid;
  29. border-width:0 1px 1px 1px;
  30. width:334px;
  31. }
  32. </STYLE>
  33. <!--HTML部分-->
  34. <TABLE id=secTable cellSpacing=0 cellPadding=0 width=334 border=0>
  35. <TBODY>
  36. <TR align=middle>
  37. <TD class="sec2" onclick=secBoard(0) width="10%">1</TD>
  38. <TD class="sec1" onclick=secBoard(1) width="10%">2</TD>
  39. <TD class="sec3" style="width:94px;">3</TD>
  40. </TR>
  41. </TBODY>
  42. </TABLE>
  43.  
  44. <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 border=0>
  45. <!--关于TBODY标记-->
  46. <TBODY style="DISPLAY: block">
  47. <TR>
  48. <TD vAlign=top align=middle>
  49. <TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
  50. <TBODY>
  51. <TR>
  52.   <TD>1</TD>
  53. </TR>
  54. </TBODY>
  55. </TABLE>
  56. </TD>
  57. </TR>
  58. </TBODY>
  59. <!--关于cells集合-->
  60. <TBODY style="DISPLAY: none">
  61. <TR>
  62. <TD vAlign=top align=middle>
  63. <TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
  64. <TBODY>
  65. <TR>
  66.   <TD>2</TD>
  67. </TR>
  68. </TBODY>
  69. </TABLE>
  70. </TD>
  71. </TR>
  72. </TBODY>
  73. </TABLE>

点击查看选项卡示例

, ,

Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

Related Post

Leave a reply？