⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 day4_4.html

📁 成为真正的网页制作的高手的话,必须了解并使用DHTML.这里提供了最好的手册和文档.
💻 HTML
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style type="text/css">
<!--
a:link {  color: blue; text-decoration: none}
a:visited {  color: purple; text-decoration: none}
a:hover {  color: purple; text-decoration: underline}
.unnamed1 {  font-family: "宋体"; font-size: 9pt}
-->
</style>
<style> 
<!--#menu {position: absolute;
left: 1px;top: 174px;width: 163px;height: 300px;}
-->
</style>
<style> 
<!--#content {position: absolute;
left: 175px;top: 184px;width: 435px;height: 300px;}
-->
</style>
<title>网猴：动态HTML</title>
</head>

<body bgcolor="#FFFFFF">
<div id="content" style="top: 13px; width: 637px; height: 1873px; left: 9px"> 
  <p>&nbsp; </p>
  <table border="0" width="600" cellspacing="0">
    <tr> 
      <td bgcolor="#ffff99" colspan="2"><font size="4" color="#000000"><strong>动态HTML教程 
        - 第四天</strong></font></td>
    </tr>
    <tr> 
      <td bgcolor="#FF6600" colspan="2"><em><font size="4"><a href="mailto:taylor@taylor.org">Taylor</a> 
        </font><font size="3">1998.3.9</font></em></td>
    </tr>
  </table>
  <p><strong><font face="宋体">第四页：完成菜单条的制作</font></strong></p>


<p><font size="3"><font face="宋体">现在给菜单条加入脚本使其能响应鼠标的行为并执行相应的<br>
功能。我们利用<b>visibility</b>属性隐藏子菜单项目并在菜单<br>
项目被点击时显示子菜单。 </font></font></p><font size="3">

<p><font face="宋体">处理visibility时，你会立刻遇到DOM不兼容的问题。<br>
Netscape的DOM更多地受其<tt>LAYER</tt>标签和属性的影响。所以<br>
即使在DOM中你将一个对象的<tt>visibility</tt>属性设置为<br>
<tt>hidden</tt>（隐藏），Netscape也会将其显示出来。如果你加入<br>
下面这条： </font>

<ul>
  <tt><p><font face="宋体">if (daMenu.visibility == 'hidden')</font></p></tt> 
</ul>

<p><font face="宋体">你所得到的不是样式表语法的参数值，而是<tt>LAYERS</tt>语法的参<br>
数值。 </font></p>

</font><p><font size="3"><font face="宋体">所以如果你设置<tt>document.foo.visibility = 'visible'</tt>, <br>
则代码将会按照你预想的那样执行，对象<tt>foo</tt>在屏幕中可以<br>
被看到。如果你用<tt>alert(document.foo.visibility)</tt>检查参<br>
数值, 则返回的数值是<tt>show</tt>。解决办法是设置一些变量，用<br>
标准的条件并设定一个名为<tt>visible</tt>的变量用于Netscape<br>
中的'show'，在Internet Explorer中则设置'visible'。<br>
在Netscape中设置一个名为<tt>'hide'</tt> 的变量，在Internet<br>
Explorer</font></font><font face="宋体" size="3"><tt>'则用hidden'</tt>。在相应的字符串位置放入这些<br>
变量，则问题就解决了。</font><font size="3"> 

<ul>
  <pre><font face="宋体">&lt;script&gt;

if (document.layers) {

  visible = 'show';

  hidden = 'hide';

} else if (document.all) {

  visible = 'visible';

  hidden = 'hidden';

}



function barTog(menu) {

  if (document.layers) {

    daMenu = document.layers[menu];

  } else if (document.all) {

    daMenu = document.all(menu).style;

  }

  if (daMenu.visibility == visible) {

    daMenu.visibility = hidden;

  } else {

    daMenu.visibility = visible;

  }

  lastMenu = daMenu;

}

&lt;/script&gt;</font></pre>
</ul>

<p><font face="宋体"><tt>barTog</tt>函数所做 
的是设置标准的条件语句，如果在被传送<br>
的变量菜单中设定的对象是visible，则隐藏该对象，否则<br>
就显示该对象。然后将对该对象的引用传递给名为<tt>lastMenu</tt><br>
的全局变量（这样以来，以后你可以再关闭它）。 接下来<br>
你要做的就是调用这个函数，所以在菜单条中你将<br>
&quot;Webmonkey&quot;设定一个anchor（锚区），并设定被点击是执<br>
行的行为。</font> 

<ul>
  <pre><font face="宋体">

&lt;div id=&quot;webmonkey&quot; class=&quot;daMenu&quot;&gt;

  &lt;a href=&quot;#&quot; class=&quot;itemAnchor&quot; 

onclick=&quot;javascript: barTog('moreMonkey'); return false;&quot;&gt;

  Webmonkey

  &lt;/a&gt;

&lt;/div&gt;

</font></pre>
</ul>

<p><font face="宋体">这段代码执行<tt>barTog</tt>函数，并将应该被打开或关闭的DIV 
的名称传递给它。显示结果<a href="basicMenu.htm">如下</a>。<a href="day4_5.html">&gt;&gt;</a></font></p>
</font>

<p><font face="宋体"><strong>动态HTML教程</strong><br>
<font color="#FF0000">第一页</font> <a href="day4_1.html">让我们编写一些有用的东西</a><br>
<font color="#FF0000">第二页</font> <a href="day4_2.html">下拉菜单脚本</a><br>
<font color="#FF0000">第三页</font> <a href="day4_3.html">使菜单初具规模</a><br>
<font color="#FF0000">第四页</font> 完成菜单条的制作<br>
<font color="#FF0000">第五页</font> <a href="day4_5.html">使菜单具备相应的功能</a></font></p>

<p><font size="3">[<a href="day1_1.html">第1天</a>][<a href="day2_1.html">第2天</a>][<a href="day3_1.html">第3天</a>][第4天][<a href="day5_1.html">第5天</a>]</font></p>
  <font size="3"> 
  <hr>
  </font><font face="verdana, arial, geneva, sans-serif" size="2">本文由<a href="http://chd.126.com" target="_blank">《CHD的网络教室》</a>根据<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>相关文章改编，版权归<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>所有</font><font size="3"> 
  </font></div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -