微软公司推出的IE4.X,使得按照HTML4标准制作的网页一时成为时尚,这类网页在动态功能方面有了非常大的提高。特别是可以通过页面内嵌的Script语句,使页面中的任意一段文字可以在需要时显示出来,在不需要时隐藏起来,利用这一特性,就可以在页面上设计出可以伸缩的层次列表出来。这种列表实际表现的是一种分层次的树状结构,读者可以用鼠标点击上一层的条目,而展开或收起它的下一层。在明白了HTML4标准中DOM的实现机制及对风格表单的定义之后,很容易可以找到实现这种列表的途径。但是一般来说,这种列表的条目都比较多,如果每次都用手工制作,不仅非常烦琐,而且也十分容易出错,所以要真正应用到实际的页面制作当中,还必须有一种比较自动的方法。本人通过实验,用ASP方式完成了一种比较通用的实现过程,稍加变化就可以应用到各种主页的制作过程当中,非常方便,在这里我把它写出来奉献给大家,希望大家能多提意见喽。 简单的实现 要在网页上实现伸缩,首先要清楚如何使页面中的一段文字按需要隐藏和显示出来。我们看下面这段HTML格式的片段: <Div Id=”test” Style=”Display:none”>要隐藏的文字</Div> 这是符合HTML4标准的HTML语句,夹在<Div>之间的文本将不显示在页面上,因为它风格表单的Display属性为none。(由于本文不主要介绍HTML4的风格表单,有关祥情请读者查找相关资料。)只要能动态地将Display属性设为空,即缺省值,那么这段文字就可以动态地被显示出来。这需要Script的支持,下面就是一个让上面那样的文字显示和隐藏起来的两个JavaScript函数,只要将自定义的Div的Id值代入,对应的文字就显示或隐藏起来了: <script language="JavaScript"> function ShowDiv(DivId) { document.all[DivId].style.display=''; return 0; } </script> function HideDiv(DivId) { document.all[DivId].style.display='none';
|