動(dòng)態(tài)顯示目錄的作用
不用每次寫(xiě)博客的時(shí)候繁瑣的人工整理目錄，又可以動(dòng)態(tài)浮動(dòng)在右下角，方便快速跳到感興趣的位置同時(shí)也可以快速的對(duì)文章內(nèi)容有一個(gè)大概的了解。
實(shí)現(xiàn)原理
首先根據(jù)個(gè)人喜好，我習(xí)慣了用 h1 來(lái)做分類。所以本篇內(nèi)容也主要是針對(duì)h1來(lái)提取目錄。
如何提取出來(lái)h1呢？
先來(lái)看這張圖，以獵豹瀏覽器為例：
首先在博客內(nèi)容第一行點(diǎn)擊鼠標(biāo)右鍵，然后選擇檢查。這時(shí)會(huì)彈出右邊的框，直接定位到我的h1標(biāo)簽，就這么簡(jiǎn)單的找到了它的父級(jí) cnblogs_post_body 。
然后使用 jquery 選擇器 來(lái)獲取到這些h1，對(duì)jquery選擇器不熟的直接跳這個(gè)鏈接溫習(xí)一下：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
$('#cnblogs_post_body h1')就這么簡(jiǎn)單的一個(gè)括號(hào)就完成了對(duì) h1 的提取。
在遍歷所有的h1，取出內(nèi)容之前，我們需要一個(gè)目錄的容器。
$('#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>');這句簡(jiǎn)單解釋就是在博客內(nèi)容最末尾插入了一個(gè) div，里面包含ul和一個(gè)默認(rèn)的li 用于折疊目錄。
接下來(lái)就要提取h1的內(nèi)容了，但在這個(gè)過(guò)程中我們還要做一件事，就是自動(dòng)給h1增加一個(gè)id，作為一個(gè)標(biāo)準(zhǔn)的懶人，我肯定連h1的id都不想寫(xiě)的，自動(dòng)生成神馬的最好了。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式