動態(tài)顯示目錄的作用

不用每次寫博客的時候繁瑣的人工整理目錄，又可以動態(tài)浮動在右下角，方便快速跳到感興趣的位置同時也可以快速的對文章內(nèi)容有一個大概的了解。

實現(xiàn)原理

首先根據(jù)個人喜好，我習(xí)慣了用 h1 來做分類。所以本篇內(nèi)容也主要是針對h1來提取目錄。

如何提取出來h1呢？

先來看這張圖，以獵豹瀏覽器為例：

首先在博客內(nèi)容第一行點擊鼠標(biāo)右鍵，然后選擇檢查。這時會彈出右邊的框，直接定位到我的h1標(biāo)簽，就這么簡單的找到了它的父級 cnblogs_post_body 。

然后使用 jquery 選擇器 來獲取到這些h1，對jquery選擇器不熟的直接跳這個鏈接溫習(xí)一下：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

$('#cnblogs_post_body h1')

就這么簡單的一個括號就完成了對 h1 的提取。

在遍歷所有的h1，取出內(nèi)容之前，我們需要一個目錄的容器。

$('#cnblogs_post_body').append('<div id="blog_catalog" class="blog_catalog"><ul><li><a id="blog_catalog_close" class="blog_catalog_close">>折疊目錄</a></li></ul></div>');

這句簡單解釋就是在博客內(nèi)容最末尾插入了一個 div，里面包含ul和一個默認的li 用于折疊目錄。

接下來就要提取h1的內(nèi)容了，但在這個過程中我們還要做一件事，就是自動給h1增加一個id，作為一個標(biāo)準的懶人，我肯定連h1的id都不想寫的，自動生成神馬的最好了。

        		
網(wǎng)友評論