最近评论
正在载入评论列表...
4.1.2 innerHTML属性
该属性对应的是一个简单的串，表示一组开始标记和结束标记之间的内容。借助该属性可以实现响应的结果在对应元素位置的显示。下面通过一个实例进行说明。
在本节对应的项目“P41_HTMLDOM”中新建一个HTML文件，名称为“menu.html”。该程序实现的动态效果如图4-2所示。该页面实现的是简单级联菜单的效果，当用户单击主菜单中对应选项时，页面中将显示出下一级子菜单。
图4-2 动态级联菜单的效果
对应页面的源代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="images/css.css" type="text/css" rel="stylesheet">
</head>
<script language="javascript" type="text/javascript">
// 创建级联菜单函数
function showSubMenu(obj) {
var currentSort =document.getElementById(obj);
currentSort.parentNode.style.display = "";
var subMenu;
if (currentSort.id=="IBM"){
subMenu = " IBM-T43";
}
else if (currentSort.id=="SONY"){
subMenu = " SONY-888";
}
currentSort.innerHTML = subMenu;
}
</script>
<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="0" width="200" bgcolor="#f5efe7" border="0">
<tr>
<td align="middle" height="4">
<img height="4" src="images/promo_list_top.gif" width="100%" border= "0" alt="">
</td>
</tr>
<tr>
<td align="middle" bgcolor="#dbc2b0" height="19">
<b>笔记本品牌</b>
</td>
</tr>
<tr>
<td height="20">
<a onclick="showSubMenu('IBM')">IBM</a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="IBM">
</td>
</tr>
<tr>
<td height="20">
<a onclick="showSubMenu('SONY')">SONY</a>
</td>
</tr>
<tr style="display:none ">
<td id="SONY" height="20">
</td>
</tr>
</table>
在该页面中，当用户单击主菜单中的选项时，将调用“showSubMenu('XXX')”函数，在该函数中将首先获取所选择选项的标志信息，然后依据获取到的信息进行逻辑判断，构造子菜单对应的信息，最终使用innerHTML属性显示在对应的位置。
在本书第5章的案例中将会对本例进一步进行修改，实现依据服务器端数据库中的数据信息动态生成子菜单并显示的效果。
考虑到innerHTML属性并不是HTML元素的标准属性，因此在使用时有可能会受到一定的限制。下一节将介绍更加灵活的实现方式。
图书导读
