TOC

此文记录在编写TOC(table of content )插件的过程中所遇到的问题与知识点。 我能够完成生成所有Header标题的目标,但大多数只有二级标题的方法。文章从两个标题的生成到所有标题的生成深入,分为多个方法。

草稿:https://www.zybuluo.com/lwxyfer/note/210913

来自stackoverflow:

http://stackoverflow.com/questions/187619/is-there-a-javascript-solution-to-generating-a-table-of-contents-for-a-page

注意学习其中的正则,replace()

演示

暴力缩进:

扩展: http://www.quirksmode.org/dom/getElementsByTagNames.html

实现: http://www.quirksmode.org/dom/toc.html

但最后有个东西叫 querySelectorAll() 这是新出的HTML5的api,好吧,可以看出,我对HTML5还是不是很熟悉啊。

这个方法就是简单的获取所有需要的Header 然后加css缩进即可。

演示

html标签缩进: http://www.cnblogs.com/xdp-gacl/p/3718879.html

此法利用DD DT

完美生成TOC:

https://github.com/idiotWu/jQuery-TOC

有JQuery 和 纯JS的方法

生成的DOM结构很完美。

演示

TODO:

1:熟悉API

2:正则表达式

3:高亮当前项

4:平滑滚动

5:关注兼容性