jQuery 实现富文本的标题自动生成目录

参考文档

• JQuery 实现自动生成二级目录
• JQuery 点击事件回到页面顶部效果

配置步骤

1. content 内容的标题要固定某个号，如：h2
2. 设置 content 内容 div 的 id 属性，如：id="yzq-blog-content"
3. 实现的 js 代码

只生成一级目录，指定 h2（效果）：

<script language="javascript" type="text/javascript">
    //生成一级目录索引列表
    function GenerateContentList() {
        var jquery_h3_list = $('#yzq-blog-content h2');// 这里的 h2, 换成内容页面对应的标题号数 (h1 h2 h3)
        if (jquery_h3_list.length > 0) {
            var content = '<a name="_labelTop"></a>';
            content += '<div id="navCategory">';
            content += '<p style="font-size:18px"><b>阅读目录</b><small>（点击目录名回目录）</small></p>';
            content += '<ol>';
            for (var i = 0; i < jquery_h3_list.length; i++) {
                var go_to_top = '<div style="" class="return-list"><a href="#top"></a><a name="_label' + i + '"></a></div>';
                $(jquery_h3_list[i]).before(go_to_top);
                var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
                content += li_content;
            }
            content += '</ol>';
            content += '</div>';
            if ($('#yzq-blog-content').length != 0) {
                $($('#yzq-blog-content')[0]).prepend(content);
            }
        }
    }

    GenerateContentList();

    $("h2").click(function (event) {
        if (event.target === this) {
            // 点击 h2 标题，回到顶部，时间是回去的动画时长
            $("html,body").animate({scrollTop: 0}, 400);
        }
    });
</script>

从 h2 到 h3 生成目录代码：

<script language="javascript" type="text/javascript">
    //生成一级目录索引列表
    function GenerateContentList() {
        var jquery_h3_list = $('#yzq-blog-content h2');// 这里的 h2, 换成内容页面对应的标题号数 (h1 h2 h3)
        if (jquery_h3_list.length > 0) {
            var content = '<a name="_labelTop"></a>';
            content += '<div id="navCategory">';
            content += '<p style="font-size:19px"><b>阅读目录</b><small>（点击目录名回目录）</small></p>';
            content += '<ul>';
            for (var i = 0; i < jquery_h3_list.length; i++) {
                var go_to_top = '<div style="" class="return-list"><a href="#top"></a><a name="_label' + i + '"></a></div>';
                $(jquery_h3_list[i]).before(go_to_top);
                {#                        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';#}
                var li_content = '<a href="#_label' + i + '"><li>' + $(jquery_h3_list[i]).text() + '</li></a>';

                // h3 生成目录
                var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i + 1], "h3");
                if (jquery_h4_list.length > 0) {
                    li_content += '<ul style="list-style-type:none;text-align:left;margin:2px 0;padding:2px 2px;">';
                }

                for (var j = 0; j < jquery_h4_list.length; j++) {
                    var go_to_top2 = '<div style="text-align: right;" ><a name="_lab2' + i + j + '"></a></div>';
                    $(jquery_h4_list[j]).before(go_to_top2);
                    li_content += '<a href="#_lab2' + i + j + '"><li>' + $(jquery_h4_list[j]).text() + '</li></a>';
                }

                if (jquery_h4_list.length > 0) {
                    li_content += '</ul>';
                }
                li_content += '</li>';
                // h3 生成目录

                content += li_content;
            }
            content += '</ul>';
            content += '</div>';
            if ($('#yzq-blog-content').length != 0) {
                $($('#yzq-blog-content')[0]).prepend(content);
            }
        }
    }

    GenerateContentList();

    $("h2").click(function (event) {
        if (event.target === this) {
            // 点击 h2 标题，回到顶部，时间是回去的动画时长
            $("html,body").animate({scrollTop: 0}, 400);
        }
    });

    $("h3").click(function (event) {
        if (event.target === this) {
            // 点击 h3 标题，回到顶部，时间是回去的动画时长
            $("html,body").animate({scrollTop: 0}, 400);
        }
    });
</script>

content 的代码：

<div class="am-article-bd yzq-article-bd" id="yzq-blog-content">
    {{ article.content | safe }}
</div>