html文件夹目录树
❶ javaScript 文件目录树
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="心梦缘ocean ocl" />
<title>My tree demo</title>
<style type="text/css">
/*主页面样式*/
.leftNav {
width: 20%;
height:500px;
border:#B9E0F7 1px solid;
margin-left: 1%;
margin-right: 1%;
}
#footer {
color:#808080;
line-height: 1.6em;
padding: 0 0 1em 0;
}
/*我的树样式表*/
.treeDiv {
color: #636363;
font-size: 14px;
font-weight: normal;
background-color: #fff;
color: black;
overflow: auto;
padding: 0 0 1em 0;
overflow-x: hidden;
}
.treeNode {
white-space: nowrap;
text-indent: -14px;
margin: 6px 2px 5px 14px;
}
a.treeUnselected:hover, a.treeSelected:hover {
background-color: #BFD9ED;
text-decoration: none;
}
a.treeUnselected, a.treeSelected {
color: black;
padding: 1px 3px 1px 0;
text-decoration: none;
}
a.treeSelected {
background-color: #B9E0F7;
}
a.treeUnselected {
background-color: transparent;
}
.treeSubnodes {
display: block;
}
.treeSubnodesHidden {
display: none;
}
.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {
height: 15px;
margin-left: 5px;
margin-right: 0px;
width: 15px;
}
.treeNode img.treeLinkImage {
cursor: pointer;
}
div.treeNode a, div.treeNode span.apiRoot {
display: inline-block;
margin-left: 24px;
text-indent: 0;
white-space: normal;
width: 95%;
word-wrap: break-word;
}
div.treeNode span.category {
cursor: pointer;
}
</style>
</head>
<body>
<div class="leftNav">
<div id="samplesToc">
<div id="tree" style="top: 35px; left: 0px;" class="treeDiv">
<div id="treeRoot" onselectstart="return false" ondragstart="return false">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一子目录 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点二</a>
</div>
</div>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点六</a>
</div>
</div>
</div>
<!--end block-->
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点二</span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>
</div>
</div>
</div>
<!--end block-->
</div>
</div>
</div> <!-- end samplesToc -->
</div> <!-- end leftNav -->
<div class="right content">
</div><!-- end main content-->
<div id="footer" align="center">
</div><!-- end footer-->
<script type="text/javascript">
var treeSelected = null;//选中的树节点
var imgPlus = new Image();
imgPlus.src="../graphics/treenodeplus.gif";
var imgMinus = new Image();
imgMinus.src="../graphics/treenodeminus.gif";
//父节点展开事件
function expandCollapse(el)
{
//如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点
if (el.className!= "treeNode"){
return; //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode
}
var child;
var imgEl;//图片子节点，在树展开时更换图片
for(var i=0; i < el.childNodes.length; i++)
{
child = el.childNodes[i];
if (child.src)
{
imgEl = child;
}
else if (child.className == "treeSubnodesHidden")
{
child.className = "treeSubnodes";//原来若隐藏，则展开
imgEl.src = imgMinus.src;//更换图片
break;
}
else if (child.className == "treeSubnodes")
{
child.className = "treeSubnodesHidden";//原来若展开，则隐藏
imgEl.src = imgPlus.src;//更换图片
break;
}
}
}
//子节点点击事件，设置选中节点的样式
function clickAnchor(el)
{
selectNode(el.parentNode);
el.blur();
}
function selectNode(el)
{
if (treeSelected != null)
{
setSubNodeClass(treeSelected, 'A', 'treeUnselected');
}
setSubNodeClass(el, 'A', 'treeSelected');
treeSelected = el;
}
function setSubNodeClass(el, nodeName, className)
{
var child;
for (var i=0; i < el.childNodes.length; i++)
{
child = el.childNodes[i];
if (child.nodeName == nodeName)
{
child.className = className;
break;
}
}
}
</script>
</body>
</html>
运行效果：
❷ 怎么用javascript获取本地硬盘的目录树，然后在html页面中显示硬盘目录树
为了安全性，现在的浏览器厂商已经禁用了对本地磁盘文件操作的API。
最多可以写点cookie到客户端，而且限制还很多
所以只要是浏览器里面的类似js这样的脚本语言都是不能对客户端的本地文件进行操控的
❸ 如何用html help workshop 4.74制作chm帮助文档
一、制作前的准备工作
由于chm帮助文件是基于HTML文件特征的，所以前期编写HTML文件的准备工作很
重要。HTML Help Workshop的角色就像是一个总管，以一个项目控制整个项目的各类
型文件，然后将各类型的文件编译成独立的chm文件。它的每个主题就是一个HTML文
件，它的结构有点类似平常我们所见到的目录树，但是它的主题包括目录及文件。主
题文件可以用任何一个HTML编辑器进行编辑，也可用HTML Help Workshop编辑，唯一
美中不足的是它的编辑器是纯文字模式，对于HTML文件而言不具备所见即所得的效果
。
如果你不会制作网页，没关系，你也可以通过Word 97或Word 2000，将Word格式
的主题文件转换成HTML格式。
二、创建项目文件
第一步：点击HTML Help Workshop菜单栏中的“File/New”命令，这时出现“选
择新建内容”的对话框，选中“Project”。
第二步：，按“OK”按钮后，将“Convert WinHelp Project”这个选项留空，
继续下一步。
第三步：点击“Browse”按钮，设置放置项目文件的目录及项目文件名，完成后
，继续下一步。
第四步：因为我们已经事先建好了html文件，此时请选择“HTML file”，继续
下一步。
第五步：点一下“Add”按钮并加入已经编辑好的主题文件（也就是设置成首页
面的HTML文件），如图4。点击“下一步”，最后点击“完成”按钮，新的项目即已
新增完成。
现在就可以进入HTML Help Workshop工作窗口。在窗口的上方是3个卷标，分别
是“Project（项目）”、“Contents（目录）”、“Index（索引）”。
在“Project”卷标的左侧是7个按钮，它们的功能名称自上而下分别是：
“Change project options（改变项目选项）”、“Add/Remove topic files（添加
/删除主题文件）”、“Add/Modify window definitions（添加/修改窗口定义）”
、“HtmlHelp API information（HTML帮助API信息）”、“View HTML source（校
验HTML源文件）”、“Save Project Contents and Index files（保存项目、目录
和索引文件）”、“Save all file and Compile（保存全部文件并编译）”。
第六步：点击“Project”编辑窗口下方的“Change Project Options”按钮后
，会弹出一个“Options”对话框（图6）。在这个对话框的“General”卷标的
“Title”中输入标题，编译后这个标题将出现在chm文件窗口的标题栏中。在“File
”卷标中选上“Automatically create contents file（.hhc） when compiling”
。
chm文件的“Search（搜索）”选项允许用户在所有主题文件中搜索字、词或短
语，将它们的标题显示出来，而且用醒目的方式显示在主题中。在“Compiler”卷标
中选上“Compiler full－text search information”，即可支持全文检索功能。
第七步：点击“Save project file and compile”按钮，虽然此时已经可以观
看结果了，不过，我们要再多作一项设定让最后的成品再完整些。
❹ sublime text3怎么让左侧显示目录树
打开sublime text3编辑器。
❺ 关于HTML Help Workshop的东西
只找到这个
如何使用
用HTML Help Workshop制作chm文件很方便，下面就以“中华搜索宝CHINASSB”的软件说明为例，介绍制作的具体步骤。
一、制作前的准备工作
由于chm帮助文件是基于HTML文件特征的，所以前期编写HTML文件的准备工作很重要。HTML Help Workshop的角色就像是一个总管，以一个项目控制整个项目的各类型文件，然后将各类型的文件编译成独立的chm文件。它的每个主题就是一个HTML文件，它的结构有点类似平常我们所见到的目录树，但是它的主题包括目录及文件。主题文件可以用任何一个HTML编辑器进行编辑，也可用HTML Help Workshop编辑，唯一美中不足的是它的编辑器是纯文字模式，对于HTML文件而言不具备所见即所得的效果。
如果你不会制作网页，没关系，你也可以通过Word 97或Word 2000，将Word格式的主题文件转换成HTML格式。
二、创建项目文件
第一步：点击HTML Help Workshop菜单栏中的“File/New”命令，这时出现“选择新建内容”的对话框，选中“Project”。
第二步：，按“OK”按钮后，将“Convert WinHelp Project”这个选项留空，继续下一步。
第三步：点击“Browse”按钮，设置放置项目文件的目录及项目文件名，完成后，继续下一步。
第四步：因为我们已经事先建好了html文件，此时请选择“HTML file”，继续下一步。
第五步：点一下“Add”按钮并加入已经编辑好的主题文件（也就是设置成首页面的HTML文件）。点击“下一步”，最后点击“完成”按钮，新的项目即已新增完成。
现在就可以进入HTML Help Workshop工作窗口。在窗口的上方是3个卷标，分别是“Project（项目）”、“Contents（目录）”、“Index（索引）”。
在“Project”卷标的左侧是7个按钮，它们的功能名称自上而下分别是：“Change project options（改变项目选项）”、“Add/Remove topic files（添加/删除主题文件）”、“Add/Modify window definitions（添加/修改窗口定义）”、“HtmlHelp API information（HTML帮助API信息）”、“View HTML source（校验HTML源文件）”、“Save Project Contents and Index files（保存项目、目录和索引文件）”、“Save all file and Compile（保存全部文件并编译）”。
第六步：点击“Project”编辑窗口下方的“Change Project Options”按钮后，会弹出一个“Options”对话框。在这个对话框的“General”卷标的“Title”中输入标题“中华搜索宝CHINASSB”，编译后这个标题将出现在chm文件窗口的标题栏中。在“File”卷标中选上“Automatically create contents file（.hhc） when compiling”。
chm文件的“Search（搜索）”选项允许用户在所有主题文件中搜索字、词或短语，将它们的标题显示出来，而且用醒目的方式显示在主题中。在“Compiler”卷标中选上“Compiler full－text search information”，即可支持全文检索功能。
第七步：点击“Save project file and compile”按钮，虽然此时已经可以观看结果了，不过，我们要再多作一项设定让最后的成品再完整些。
三、创建目录文件
编辑目录文件是制作chm文件最关键的工作。目录文件应该包含一个chm文件所有目录（主题），而每个目录又包含条目标题（名称）和该条目的主题文件，要避免条目标题与对应的主题不一致的情况出现。等所有目录都添加好后目录就算完成了。
第一步：点击HTML Help Workshop工作窗口的“Contents”卷标，这时系统弹出一个对话框，提示你“项目”还没有关联目录文件（.hhc），选择“Create a new contents file”，点击“OK”按钮后将创建一个新的目录文件。
第二步：请指定一个新目录文件名和存放路径，点击“保存”后出现目录编辑窗口，目录编辑窗口的左侧有11个按钮。
第三步：根据需要插入标题（类似资源管理器中的目录）或页面（类似资源管理器中某目录下的文件），按下“Insert a heading（插入标题）”或“Insert a page（插入页面）”按钮，都会弹出“Table of Contents Entry”对话框，在“Entry title”输入框中输入条目的标题，并根据情况选定对应的主题文件，单击“Entry title”下的“Add”按钮，在弹出的对话框下面的“File or URL”输入框中输入文件名或URL地址并确定。
第四步：如果在单击“Insert a page”按钮之前所选择的条目不包含别的条目，也不被别的条目所包含，那么会询问“Do you want to insert this entry at the beginningof the table of contents？”，选择了“是”会增加起始条目（一级条目），选择了“否”会增加一个子条目。
标题可以分为多级，要按照制作的内容统一考虑。如果觉得不满意，可以用左侧的箭头进行调整，也可以选定该条目，单击鼠标右键，不但可以调整，还可以插入标题、主题或目录文件。
四、创建索引文件
索引文件（hhk）也是一个HTML文件，它包含若干个关键词，当用户打开chm文件后，单击索引标签并输入一个关键词后，chm文件将显示与这个关键词有关的主题的列表，使大家非常方便地找到相关主题。
第一步：点击HTML Help Workshop工作窗口的“Index”卷标，这时系统弹出一个对话框，提示你“项目”还没有关联索引文件（.hhk），选择“Create a new contents file”，点击“OK”按钮后将创建一个新的索引文件。
第二步：请指定一个新索引文件名和存放路径，点击“保存”后出现索引编辑窗口，索引编辑窗口的左侧有11个按钮。
第三步：单击“Insert a keyWord”按钮，出现“Index Entry”对话框，在“General”选项的“KeyWord”输入框中输入关键词，再单击“Add”按钮添加与该关键词相关联的主题文件。如果想跳转到另一个关键词，在“Index Entry”对话框中按“Advance”选项，选中“Target is Another KeyWord”，再单击“General”选项的“KeyWord”输入框中输入关键词，再单击“Add”按钮添加与要跳转的关键词相关联的主题文件，单击“OK”按钮。最后单击“确定”按钮，并按“Save file”进行存盘。
五、最后的设置工作
第一步：选择“Project”卷标，点击“Change Project Options”按钮，在“File”卷标的“Content file”项目中，点击“Browse”指定为toc.hhc。在“Index file”项目中，点击“Browse”指定为index.hhc。
第二步：重新点击“Save project file and compile”按钮进行存盘编译。
(下转第11版)
(上接第10版)
第三步：最后点击主菜单“View/Compiled file”，通过“Browse”指定该chm文件的目录及文件名即可看到我们的作品了。
❻ 求助html索引代码，帖子编辑器中的目录功能
在目录树的顶端右键-点击链接，如果连接也不能点，就是服务没有开启，在系统的服务中启动MAPGIS dataStorage服务。
❼ html目录树
我把第一列目录变成了三级结构，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic;
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) && document.getElementById(picId)){
obj=document.getElementById(str); //obj 为 DIV 对象
pic=document.getElementById(picId); //pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""; //就将 display 的样式清空
pic.src = "0001.jpg"; //更改图片对象的路径
}else{
obj.style.display = "none";
pic.src = "0000.jpg";
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand;
width: 100px;
}
.div1_1{
cursor: hand;
width: 100px;
color: #666666;
font-size: 14px
}
.div2 {
color: #666666;
font-size: 12px;
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1"> 语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 文言文</div> <br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2"> 数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3"> 副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4"> 副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
❽ 怎样用HTML Help Workshop制作chm文件
我替上一位补充点，那位仁兄好像没有回答完全。
三、创建目录文件
编辑目录文件是制作chm文件最关键的工作。目录文件应该包含一个chm文件所有
目录（主题），而每个目录又包含条目标题（名称）和该条目的主题文件，要避免条
目标题与对应的主题不一致的情况出现。等所有目录都添加好后目录就算完成了。
第一步：点击HTML Help Workshop工作窗口的“Contents”卷标，这时系统弹出
一个对话框，提示你“项目”还没有关联目录文件（.hhc），选择“Create a new
contents file”，点击“OK”按钮后将创建一个新的目录文件。
第二步：请指定一个新目录文件名和存放路径，点击“保存”后出现目录编辑窗
口，目录编辑窗口的左侧有11个按钮。
第三步：根据需要插入标题（类似资源管理器中的目录）或页面（类似资源管理
器中某目录下的文件），按下“Insert a heading（插入标题）”或“Insert a
page（插入页面）”按钮，都会弹出“Table of Contents Entry”对话框（图7），
在“Entry title”输入框中输入条目的标题，并根据情况选定对应的主题文件，单
击“Entry title”下的“Add”按钮，在弹出的对话框下面的“File or URL”输入
框中输入文件名或URL地址并确定。
第四步：如果在单击“Insert a page”按钮之前所选择的条目不包含别的条目
，也不被别的条目所包含，那么会询问“Do you want to insert this entry at
the beginningof the table of contents？”，选择了“是”会增加起始条目（一
级条目），选择了“否”会增加一个子条目。
标题可以分为多级，要按照制作的内容统一考虑。如果觉得不满意，可以用左侧
的箭头进行调整，也可以选定该条目，单击鼠标右键，不但可以调整，还可以插入标
题、主题或目录文件。
四、创建索引文件
索引文件（hhk）也是一个HTML文件，它包含若干个关键词，当用户打开chm文件
后，单击索引标签并输入一个关键词后，chm文件将显示与这个关键词有关的主题的
列表，使大家非常方便地找到相关主题。
第一步：点击HTML Help Workshop工作窗口的“Index”卷标，这时系统弹出一
个对话框，提示你“项目”还没有关联索引文件（.hhk），选择“Create a new
contents file”，点击“OK”按钮后将创建一个新的索引文件。
第二步：请指定一个新索引文件名和存放路径，点击“保存”后出现索引编辑窗
口，索引编辑窗口的左侧有11个按钮。
第三步：单击“Insert a keyWord”按钮，出现“Index Entry”对话框，在
“General”选项的“KeyWord”输入框中输入关键词，再单击“Add”按钮添加与该
关键词相关联的主题文件。如果想跳转到另一个关键词，在“Index Entry”对话框
中按“Advance”选项，选中“Target is Another KeyWord”，再单击“General”
选项的“KeyWord”输入框中输入关键词，再单击“Add”按钮添加与要跳转的关键词
相关联的主题文件，单击“OK”按钮。最后单击“确定”按钮，并按“Save file”
进行存盘。
五、最后的设置工作
第一步：选择“Project”卷标，点击“Change Project Options”按钮，在
“File”卷标的“Content file”项目中，点击“Browse”指定为toc.hhc。在
“Index file”项目中，点击“Browse”指定为index.hhc。
第二步：重新点击“Save project file and compile”按钮进行存盘编译。
第三步：最后点击主菜单“View/Compiled file”，通过“Browse”指定该chm
文件的目录及文件名即可看到我们的作品了。
的确也够简单的了，只要有完整的HTML源文件，激活Html Help Workshop创建一
个新的项目文件，将第一个html（通常是default.htm或index.html）加进项目，存
盘并编译就大功告成。同样的一组HTML文件，放在网站上是一页一页的网页，变成单一的chm后，则可用作软件辅助说明，而且已经内建了全文检索功能。
❾ 如何做文件夹的树状目录
1、打开文件资源管理器
4、在“查看”tab中，把“展开到当前文件夹”的选项勾上
❿ 什么是根文件夹
根目录指逻辑驱动器的最上一级目录，它是相对子目录来说的。打开“我的电脑”，双击C盘就进入C盘的根目录，双击D盘就进入D盘的根目录。其它类推。
根目录在文件系统建立时即已被创建，其目的就是存储子目录（也称为文件夹）或文件的目录项。一“棵“目录树，树的最根本就是它的根（根目录）。
(10)html文件夹目录树扩展阅读：
注意事项
需要注意的是，由于现今U盘病毒盛行，进入U盘的根目录最好不要双击，而建议用鼠标右键单击U盘图标，然后选择“打开”进入根目录，或从地址栏选取U盘的地址打开！
相对路径
根目录相对路径：是指从站点文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。每使用一次../就返回上一级目录。