管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

用js实现的比较经典实用的触发型导航菜单

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>经典实用的触发型导航菜单</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> 
 
            <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20language%3Djavascript%3E%20%0D%0A%20%20%20%20%20function%20secBoard(n)%20%0D%0A%20%20%7B%20%0D%0A%20%20%20%20for(i%3D0%3Bi%3CsecTable.cells.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20secTable.cells%20%0D%0A%0D%0A%5Bi%5D.className%3D%22sec1%22%3B%20%0D%0A%20%20%20%20secTable.cells%5Bn%5D.className%3D%22sec2%22%3B%20%0D%0A%20%20%20%20for(i%3D0%3Bi%3CmainTable.tBodies.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20mainTable.tBodies%20%0D%0A%0D%0A%5Bi%5D.style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20mainTable.tBodies%20%0D%0A%0D%0A%5Bn%5D.style.display%3D%22block%22%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%20%20%20%3C%2FSCRIPT%3E"> 
 
            <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

要素，该要素也提供给所有表。

参考：《动态HTML参考和开发应用大全》（人民邮电出

版社  
                        Microsoft Corporation著  
                    北京华中兴业科技发展有限公司

译）

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

参考：《动态HTML参考和开发应

用大全》（人民邮电出版社  
                        Microsoft Corporation著  
                    北京华中兴业科技发展有限公司

译）

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

参考：

《动态HTML参考和开发应用大全》（人民邮电出版社  
                        Microsoft Corporation著  
                    北京华中兴业科技发展有限公司

译）

</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>设置或者检索对象

是否被提供。
可能的值为block、none、

inline、list-item、table-header-group、table-

footer-group。
该特性可读写，块要素默认

值为block，内联要素默认值为inline；层叠样式表

（CSS）属性不可继承。

参考：《

动态HTML参考和开发应用大全》（人民邮电出版社  
                        Microsoft Corporation著

北京华中兴业科技发展有限公司译）

<A

href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true" _ewebeditor_ta_href="http%3A%2F%2Fmsdn.microsoft.com%2Fworkshop%2Fauthor%2Fdhtml%2Freference%2Fproperties%2Fdisplay.asp%3Fframe%3Dtrue"                        target=_blank>点击此处 
</A>可参阅微软<A href="http://msdn.microsoft.com/" _ewebeditor_ta_href="http%3A%2F%2Fmsdn.microsoft.com%2F" target=_blank>MSDN在线</A>上的解释。

</TD></TR></TBODY></TABLE>

;</TD></TR></TBODY></TABLE&g

t;</body>

</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程