我

通过

标签有标题.有没有一种方法可以使用JavaScript来生成用作锚标签的内容的目录？

我希望输出类似于:

    
Header 1
    
Header 1
        
Header 2
            
Header 3

我目前没有使用JavaScript框架,但我不明白为什么我不能使用它.

我也在寻找已经完成的事情,因为我猜这是一个常见的问题,但如果没有,那么我自己的起点就会很好.

1> Ates Goral..：

---

我无法抗拒快速实施.

在页面的任何位置添加以下脚本:

window.onload = function () {
    var toc = "";
    var level = 0;

    document.getElementById("contents").innerHTML =
        document.getElementById("contents").innerHTML.replace(
            /([^<]+)<\/h([\d])>/gi,
            function (str, openLevel, titleText, closeLevel) {
                if (openLevel != closeLevel) {
                    return str;
                }

                if (openLevel > level) {
                    toc += (new Array(openLevel - level + 1)).join("
");
                } else if (openLevel < level) {
                    toc += (new Array(level - openLevel + 1)).join("
");
                }

                level = parseInt(openLevel);

                var anchor = titleText.replace(/ /g, "_");
                toc += "
" + titleText
                    + "
";

                return ""
                    + titleText + "";
            }
        );

    if (level) {
        toc += (new Array(level + 1)).join("");
    }

    document.getElementById("toc").innerHTML += toc;
};

您的页面应该是这样的结构:

    

        
Table of Contents
    
    

    

        
Fruits
        
Red Fruits
        
Apple
        
Raspberry
        
Orange Fruits
        
Orange
        
Tangerine
        
Vegetables
        
Vegetables Which Are Actually Fruits
        
Tomato
        
Eggplant
    

您可以在http://magnetiq.com/exports/toc.htm上看到它的运行情况(在IE,FF,Safari,Opera中工作)

2> 小智..：

---

我认为JQuery是一种快速简便的解决方案.快速谷歌搜索jquery目录产生两个有希望的结果:

jqTOC

有关如何手动执行此操作的文章