WEB开发网
开发学院软件开发C++ 实现目录树菜单 阅读

实现目录树菜单

 2008-03-08 12:30:36 来源:WEB开发网   
核心提示:1.建立空文件index.htm,在同目录下建立子目录images,在images之下有文件folder_close.gif(有子项的目录关闭时的图标)folder_open.gif(有子项的目录打开时的图标)folder_link.gif(没有子项的文件,只有链接的文件的图标)2.在<head></

  1.建立空文件index.htm,在同目录下建立子目录images,在images之下有文件
folder_close.gif(有子项的目录关闭时的图标)
folder_open.gif(有子项的目录打开时的图标)
folder_link.gif(没有子项的文件,只有链接的文件的图标)

2.在<head></head>之间加上

<style>
<!--
#foldheader{cursor:hand ;color:#0000ff;list-style-image:url(images/folder_close.gif)}
#foldinglist{list-style-image:url(images/folder_link.gif)}
//-->
</style>
<script language="javascript1.2">
<!--
function change()
{
if(!document.all)
return
if (event.srcElement.id=="foldheader")
{
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none")
{
nested.style.display=''
event.srcElement.style.listStyleImage="url(images/folder_open.gif)"
}
else
{
nested.style.display="none"
event.srcElement.style.listStyleImage="url(images/folder_close.gif)"
}
}
}
document.onclick=change
//-->
</script>

3.在<body>之后加上如下代码:

<li id="foldheader">项目列表</li>
<ul id="foldinglist" style="display:none">
<li><a href="personalbox.htm">个人邮箱</a></li>
<li><a href="companybox.htm">企业邮箱</a></li>
</ul>

在IE中看index.htm的效果

Tags:实现 目录 菜单

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接