用js實現(xiàn)的比較經(jīng)典實用的觸發(fā)型導航菜單

更新時間：2007年03月09日 00:00:00 作者：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>經(jīng)典實用的觸發(fā)型導航菜單</title> </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>              <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>              <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>               <TBODY>               <TR align=middle 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 style="DISPLAY: block">               <TR>                 <TD vAlign=top align=middle>                   <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>                     <TBODY>                     <TR>                       <TD>指定行做為表體。 注釋：TBODY要素是塊要素，并且需要結束標 簽。　　　即使如果表格沒有顯式定義TBODY 要素，該要素也提供給所有表。 參考：《動態(tài)HTML參考和開發(fā)應用大全》（人民郵電出 版社                          Microsoft Corporation著                      北京華中興業(yè)科技發(fā)展有限公司 譯） </TD></TR></TB ODY></TABLE></TD></TR></T BODY>               <TBODY style="DISPLAY:  none">               <TR>                 <TD vAlign=top  align=middle>                   <TABLE cellSpacing=0  cellPadding=0 width=490 border=0>                     <TBODY>                     <TR>                       <TD>檢索表行或者整個 表中所有單元格的集合。應用于TR、TABLE。 參考：《動態(tài)HTML參考和開發(fā)應 用大全》（人民郵電出版社                          Microsoft Corporation著                      北京華中興業(yè)科技發(fā)展有限公司 譯） </TD></TR></TB ODY></TABLE></TD></TR></T BODY>               <TBODY style="DISPLAY:  none">               <TR>                 <TD vAlign=top  align=middle>                   <TABLE cellSpacing=0  cellPadding=0 width=490 border=0>                     <TBODY>                     <TR>                       <TD>檢索表中所有TBODY 對象的集合。對象在該集合中按照HTML源順序排列。 應用于TABLE。參考： 《動態(tài)HTML參考和開發(fā)應用大全》（人民郵電出版社                          Microsoft Corporation著                      北京華中興業(yè)科技發(fā)展有限公司 譯） </TD></TR></TB ODY></TABLE></TD></TR></T BODY>               <TBODY style="DISPLAY:  none">               <TR>                 <TD vAlign=top  align=middle>                   <TABLE cellSpacing=0  cellPadding=0 width=490 border=0>                     <TBODY>                     <TR>                       <TD>設置或者檢索對象 是否被提供?？赡艿闹禐閎lock、none、 inline、list-item、table-header-group、table- footer-group。該特性可讀寫，塊要素默認 值為block，內聯(lián)要素默認值為inline；層疊樣式表 （CSS）屬性不可繼承。參考：《 動態(tài)HTML參考和開發(fā)應用大全》（人民郵電出版社                          Microsoft Corporation著  北京華中興業(yè)科技發(fā)展有限公司譯） <A                                                   target=_blank>點擊此處 </A>可參閱微軟<A  target=_blank>MSDN在線</A>上的解釋。                 </TD></TR></TBODY></TABLE> ;</TD></TR></TBODY></TABLE&g t;</body> </html>

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

您可能感興趣的文章:

用js實現(xiàn)的比較經(jīng)典實用的觸發(fā)型導航菜單

Js 豎直伸縮菜單(百度)
這個菜單是從百度推廣扒下來的，去掉了CSS文件，僅保留核心的Js動作，點擊每一項的標題，可展開二級的子項菜單，想用的朋友自己添加樣式，這樣更能符合你網(wǎng)站的主題。
2010-03-03
css實現(xiàn)會折疊、展開的菜單導航欄效果
基于css實現(xiàn)的會折疊、展開的樹形菜單導航欄，很早以前寫的，也沒有過多美化，但是比較實用，如果想用的朋友就自己美化吧
2012-12-12
js仿土豆視頻滾動菜單
比較漂亮的仿土豆視頻導航菜單，漂亮大方
2008-05-05
提取自百度有啊的css圓角效果
css圓角效果大家注意下圖片，其實就是利用圖片+css實現(xiàn)
2009-03-03
javascript實現(xiàn)操作cookie實現(xiàn)的可記憶菜單
javascript實現(xiàn)操作cookie實現(xiàn)的可記憶菜單...
2007-07-07
改寫一個簡單的菜單彈性大小
看到一個簡單的菜單樣式，由于是作者比較早的作品，視覺效果不太好，有點突兀自己做了一點小修改，模仿icon動畫的效果(區(qū)別的關鍵點是getStyle取得當前計算樣式這個函數(shù))
2010-12-12
js iframe網(wǎng)站后臺左右收縮型頁面腳本
其實和我的后臺一樣網(wǎng)站后臺免費提供這里的樣式的重點是指當鼠標移到三角按鈕時變成手掌
2008-07-07
jquery 導航設計實現(xiàn)代碼學習jquery的朋友可以看下
jquery 導航設計，主要是通過jquery控制一些css樣式變換。
2009-09-09
msn上的tab功能Firefox對childNodes處理的一個BUG
今天公司用到一個tab功能發(fā)現(xiàn) msn上的不錯，但是在firefox兼容不好，msn他們的方法就是用了不少的div包含，不過網(wǎng)上有高人解決了。
2008-01-01
js tab效果的實現(xiàn)代碼
js之類似tab的實現(xiàn)，之前已經(jīng)發(fā)布了很多，需要的朋友多看看。
2009-12-12