0

我正在寻找从 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

带有链接到标题的行，并且应该返回原始的 html 并插入锚点。

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

如果他们都没有，是否有人为此目的看到了一个好的 JS 模块？

4

3 回答 3

4

jQuery是你的朋友，有这个插件：目录。主页是http://code.google.com/p/samaxesjs/

于 2009-05-22T00:34:09.043 回答
1

自己做，我写的:)，希望对你有帮助

添加一个 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）并生成您的目录

于 2009-05-22T01:11:39.857 回答
-1

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

于 2009-05-22T00:52:26.430 回答