经典实用的触发型导航菜单

站内搜索

热门关键字：表格超链接漂浮跟随旋转闪烁日期艺术字滚动点击关联菜单弹出随机

网页特效分类

网页特效分类 >> 导航菜单

经典实用的触发型导航菜单

[ 发布者：肥鱼 | 来源：本站整理 | 时间：2006-5-11 | 浏览：人次 ]

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JcwCn.Com|---经典实用的触发型导航菜单</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>
<!--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=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标记-->
              <TBODY style="DISPLAY: block">
              <TR>
                <TD vAlign=top align=middle><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></TB

ODY></TABLE></TD></TR></T

BODY><!--关于cells集合-->
              <TBODY style="DISPLAY: 

none">
              <TR>
                <TD vAlign=top 

align=middle><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></TB

ODY></TABLE></TD></TR></T

BODY><!--关于tBodies集合-->
              <TBODY style="DISPLAY: 

none">
              <TR>
                <TD vAlign=top 

align=middle><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></TB

ODY></TABLE></TD></TR></T

BODY><!--关于display属性-->
              <TBODY style="DISPLAY: 

none">
              <TR>
                <TD vAlign=top 

align=middle><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&g

t;</body>

</html>

本类相关特效