Question

我正在寻找一个来自HTML（带锚点）的动态“目录”生成的javascript。

示例：

<h1>First level1 heading</h1>
lorem ipsum
<h2>1a heading</h2>
lorem ipsum
<h2>1b heading</h2>
lorem ipsum
<h1>Second level1 heading</h1>
lorem ipsum

应该返回类似

的内容

 First level1 heading   
   1a heading   
   1b heading 
 Second level1 heading

链接到标题的行，并且还应该在插入锚点的情况下返回orignal html。

其中一个大型javascript库或框架中是否包含某些内容？

如果没有，有人为此目的看过一个好的JS模块吗？

Answer 1

jQuery是您的朋友，使用此插件：table of contents。主页为http://code.google.com/p/samaxesjs/

Answer 2

自己动手，我写了:)，希望有所帮助

添加div元素作为body元素的第一个子元素，并将id设为“tableOfContents”

并将下面的脚本添加为body元素的最后一个子元素

<script>
    var el = document.getElementsByTagName("*") || [];
    var toc = "<ul>";
    var lvl = 1;
    for(var i=0;i<el.length;i++)
    {
        var ce = el[i];
        var tag = ce.tagName + "";
        var m = tag.match(/^h([1-5])$/i);
        if(m)
        {
            var n = Number(m[1]);
            if(lvl > n)
            {
                while(lvl-->n)toc+="</ul></li>";  
            }else if(lvl < n){
                while(lvl++<n)toc+="<li style='list-style:none'><ul>";
            }
            toc +=  '<li><a href="#toc_' + i + '">' + 
                    (ce.innerText || ce.text()) +
                    '</a></li>';
            var ta = document.createElement("div");
            ta.innerHTML = '<a name="toc_' + i + '" />';
            ce.insertBefore(ta, ce.firstChild);
        }
    }
    while(lvl-->1)toc+="</ul></li>";
    toc+="</ul>";
    document.getElementById("tableOfContents").
        innerHTML = toc;
</script>

此脚本将检测每个H（1到5）并生成目录

Answer 3

这是一个非常简单的问题，可以用10-20线功能解决。不需要框架。使用getElementsByTagName（'h1'），getElementsByTagName（'h2'）或使用正则表达式来遍历DOM。加载框架会带来性能影响和风险，因此我建议不要为简单问题安装一个。

哪个javascript库或框架支持“Table Of Content”一代？

3 个答案: