我们可以用网页框架实现该功能,下面是左边的文件(left.htm)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="images/index.css" />
<title>xxx</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:108px;
top:191px;
width:104px;
height:68px;
z-index:1;
}
a:link {
color: #CCCCCC;
text-decoration: underline;
}
a:visited {
color: #CCCCCC;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body class="sidebar">
<br>
<a href="file://C:/" target="main">C 盘</a>
<a href="file://D:/" target="main">D 盘</a>
<a href="file://E:/" target="main">E 盘</a>
<a href="file://F:/" target="main">F 盘</a>
<a href="file://G:/" target="main">G 盘</a>
<a href="file://D:/我的文档/桌面/" target="main">桌面</a>
<script type="text/javascript">/*<![CDATA[*/
var A = document.getElementById("sidebar").getElementsByTagName("A");
for(var i=0; i<A.length; i++)
{
if(A[i].href){ A[i].target="main"; A[i].οnclick=function(){mm(this);}}
}
function mm(a)
{
var dd = a.parentNode;
var dds= document.body.getElementsByTagName("DD");
for(var i=0; i<dds.length; i++) dds[i].className="";
dd.className="selected";
}
/*]]>*/</script>
</body>
</html>
框架(index.html)代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx</title>
</head>
<frameset rows="70, *" title=" ">
<frame noresize="noresize" scrolling="no" frameborder="0" title="top" src="top.htm" style="border: none;" longdesc="" />
<frameset cols="226, *" title=" ">
<frame title="left" src="left.htm" frameborder="0" longdesc="" scrolling="no" />
<frame title="main" name="main" src="main.htm" frameborder="0" longdesc="" />
</frameset>
<noframes title=" ">
<body><a href="#">对不起,你的浏览器不支持框架(frameset)!</a></body>
</noframes>
</frameset>
</html>
框架弄好后就可以使用了,不过不能在服务器上运行的,直接打开就可以