首頁新隨筆新文章聯系

2025年5月

日

一

二

三

四

五

六

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

blog是收集資料并且作為技術交流的平臺，發布一些本人常用資料或開發經驗，希望能和大家一起討論、進步。

訪問統計

留言簿(6)

我參與的團隊

牛虻(0/0)

隨筆檔案(8)

文章分類(149)

新聞分類(1)

鐵血軍事(1)

相冊

收藏夾(21)

友情鏈接

我的鏈接

搜索

積分與排名

積分 - 150511
排名 - 413

閱讀排行榜

評論排行榜

JS實現標簽效果

如何實現運行代碼框功能

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<STYLE type=text/css>.sec1 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP: 
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px 
solid; CURSOR: hand; COLOR: #000000; BORDER-
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: 
#eeeeee
}
.sec2 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP: 
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: 
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
 BORDER-RIGHT: gray 1px solid; BORDER-
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<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>
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
 <TR align=center height=20>
     <TD class=sec2 onclick=secBoard(0) width="10%">關于TBODY標記</TD>
        <TD class=sec1 onclick=secBoard(1) width="10%">關于cells集合</TD>
  <TD class=sec1 onclick=secBoard(2) width="10%">關于tBodies集合</TD>
        <TD class=sec1 onclick=secBoard(3) width="10%">關于display屬性</TD></TR></TBODY></TABLE>
        <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--關于TBODY標記-->
              <TBODY style="DISPLAY: block">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>指定行做為表體。<BR>注釋：TBODY要素是塊要素，并且需要結束標簽。<BR>即使如果表格沒有顯式定義TBODY
要素，該要素也提供給所有表。<BR><BR>
參考：《動態HTML參考和開發應用大全》（人民郵電出
版社      Microsoft Corporation著 
                    北京華中興業科技發展有限公司 譯）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--關于cells集合-->
 <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>檢索表行或者整個
表中所有單元格的集合。<BR>應用于TR、TABLE。
<BR><BR>參考：《動態HTML參考和開發應
用大全》（人民郵電出版社 Microsoft Corporation著 
                    北京華中興業科技發展有限公司）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--關于tBodies集合-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>檢索表中所有TBODY
對象的集合。對象在該集合中按照HTML源順序排列。
<BR>應用于TABLE。<BR><BR>參考：
《動態HTML參考和開發應用大全》（人民郵電出版社 
                        Microsoft Corporation著 
                    北京華中興業科技發展有限公司譯）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--關于display屬性-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>設置或者檢索對象
是否被提供。<BR>可能的值為block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>該特性可讀寫，塊要素默認
值為block，內聯要素默認值為inline；層疊樣式表
（CSS）屬性不可繼承。<BR><BR>參考：《
動態HTML參考和開發應用大全》（人民郵電出版社 
                        Microsoft Corporation著 
北京華中興業科技發展有限公司譯）
<BR><BR><A href="javascript:if(confirm('http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true  http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true'" tppabs="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true" target=_blank>點擊此處
</A>可參閱微軟<A href="javascript:if(confirm('http://msdn.microsoft.com/  http://msdn.microsoft.com/'" tppabs="http://msdn.microsoft.com/" target=_blank>MSDN在線</A>上的解釋。 
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></body></html>

[提示：你可先修改部分代碼，再按運行]

---------------------------------------------------------------------------------------------------------------------------------
說人之短，乃護己之短。夸己之長，乃忌人之長。皆由存心不厚，識量太狹耳。能去此弊，可以進德，可以遠怨。
http://www.aygfsteel.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------

posted on 2007-12-09 15:52 宋針還閱讀(912) 評論(0) 編輯收藏所屬分類: JAVASCRIPT

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JS屏蔽功能類 javascript table delete row javascript insert table row JQuery技巧總結(轉載) JS實現table里單元格排序模擬QQ菜單效果 js觸發彈出層 javascript框架編程仿MSN效果 FOCUS效果輸入框