html文件夾目錄樹

發布時間: 2022-04-20 15:29:50

❶ javaScript 文件目錄樹

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

/*主頁面樣式*/

.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>

<span onclick="expandCollapse(this.parentNode)" class="category">目錄節點一 </span>

<span onclick="expandCollapse(this.parentNode)" class="category">目錄節點一子目錄 </span>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二級葉子結點一</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二級葉子結點二</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點一</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點二</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點三</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點四</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點五</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點六</a>

</div>

<span onclick="expandCollapse(this.parentNode)" class="category">目錄節點二</span>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點一</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點二</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點三</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點四</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點五</a>

</div>

</div>

</div>

</div>

</div>

</div>

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">

</script>
<style type="text/css">

</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盤的地址打開！

相對路徑

根目錄相對路徑：是指從站點文件夾到被鏈接文檔經過的路徑。站點上所有公開的文件都存放在站點的根目錄下。每使用一次../就返回上一級目錄。

閱讀全文

熱點內容

搭建一個流媒體伺服器發布：2024-05-05 20:40:59 瀏覽：666

2017中超資料庫發布：2024-05-05 20:37:25 瀏覽：378

編程包游戲發布：2024-05-05 20:25:00 瀏覽：608

系統鎖屏忘記密碼如何設置發布：2024-05-05 20:18:07 瀏覽：759

xp怎樣訪問win7 發布：2024-05-05 20:17:07 瀏覽：870

c語言訪問http 發布：2024-05-05 20:04:14 瀏覽：874

什麼可以配置波爾多葉發布：2024-05-05 20:00:32 瀏覽：964

cgxrar解壓密碼發布：2024-05-05 19:47:24 瀏覽：634

ubuntu編譯linux內核發布：2024-05-05 19:46:05 瀏覽：8

php靜態方法調用對象發布：2024-05-05 19:24:30 瀏覽：367

html文件夾目錄樹

與html文件夾目錄樹相關的資訊