JavaJavaScript网页设计活学活用300问源文件-011

根据给定文件的信息，我们可以提炼出以下几个重要的知识点： ### 1. HTML与JavaScript结合实现动态效果 在HTML中，可以通过JavaScript来控制元素的显示与隐藏，实现动态效果。本例中，通过设置JavaScript函数`expandIt(el)`来切换指定元素的可见性。 #### 实现方法： - **CSS样式定义**：在`<style>`标签内定义了一个`.child`类，该类将元素的`display`属性设置为`none`，使元素默认不可见。 - **JavaScript函数**： - `expandIt(el)`: 当点击带有`onClick`事件的链接时，此函数被调用。它首先判断浏览器是否支持`document.all`（这里是用来检测IE4及以上版本），然后通过传入的参数`el`找到对应的子元素，并控制其可见性。 - `getIndex(el)`: 返回指定层的索引位置。 - `arrange()`: 调整页面中所有层的位置。 - `initIt()`: 页面加载时初始化所有带有`child`类的`DIV`元素，隐藏它们。 ### 2. 使用CSS控制元素样式 本例中的CSS主要用来定义隐藏样式。通过JavaScript动态修改元素的CSS样式，实现动态效果。 #### CSS样式代码示例： ```css <style type='text/css'> .child { display: none; } </style> ``` ### 3. HTML结构设计与布局 该代码片段展示了如何通过HTML与JavaScript结合，实现树状菜单的效果。 #### HTML结构示例： ```html <!-- TreeMenu1 --> <div id='TreeMenu1Parent' class='parent'> <a href="#" onClick="expandIt('TreeMenu1'); return false;"> <img src="Picture001.jpg" width=20 height=15 border=1>篇 </a> </div> <div id='TreeMenu1Child' class='child'> <a href="../Ch10/Ch10-135.html" target='_target'> <img src="Picture002.jpg" width=20 height=15 border=1>示息 </a><br> <a href="../Ch10/Ch10-137.html" target='_target'> <img src="Picture002.jpg" width=20 height=15 border=1>洰 </a><br> <a href="../Ch10/Ch10-139.html" target='_target'> <img src="Picture002.jpg" width=20 height=15 border=1>签 </a><br> </div> <!-- TreeMenu2 --> <div id='TreeMenu2Parent' class='parent'> <a href="#" onClick="expandIt('TreeMenu2'); return false;"> <img src="Picture001.jpg" width=20 height=15 border=1>篇 </a> </div> <div id='TreeMenu2Child' class='child'> <!-- 相应链接 --> </div> ``` ### 4. JavaScript与DOM操作 本例中还涉及到JavaScript对DOM的操作，包括获取元素、改变元素属性等。 #### 关键操作： - **获取元素**：通过`document.getElementById()`或`document.all`来获取指定ID的元素。 - **改变元素属性**：如`whichEl1.style.display = "block";`用于显示元素。 ### 5. 兼容性处理 由于早期浏览器间的差异较大，因此在编写代码时需要考虑兼容性问题。本例中通过`IE4=(document.all)?1:0;`来判断当前浏览器是否为IE4及以上版本。 ### 总结 这段代码示例展示了如何使用HTML、CSS以及JavaScript结合实现一个简单的动态树状菜单功能。其中涉及到了JavaScript对DOM的操作、CSS样式控制以及简单的兼容性处理。这种类型的网页特效在实际开发中非常常见，掌握这些技术对于提高网站交互性和用户体验有着重要意义。