获取正文部分标题组合成锚点导航目录

html正文，点击按钮切换标题栏的显示与隐藏

<style>
    /*显示文章内容页面右下角显示导航按钮*/
    .showtitle {
        cursor: pointer;
        position: fixed;
        right: 25px;
        bottom: 135px;
        z-index: 99999;
        display: block;
        width: 50px;
        height: 50px;
        background: url(../images/backpre.png) no-repeat 0 0;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
    .showtitle:hover {
        background: url(../images/backpre.png) no-repeat 0 -52px;
    }

    /*显示文章内容页面右方导航列表样式*/
    .article_navigation{
        width:300px;
        background:#fff;
        border:1px #32c6c6 solid;
        border-radius:4px;
        position:fixed;
        right:0;
        padding:0 6px;
        margin-top: 200px;
        z-index:9999;
        overflow: auto;
        max-height: 500px;
        display: none;
    }
    .article_navigation a{
        width:100%;
        height:1px;
        line-height:30px;
        display:inline-block;
        color: #c1c1c1;
    }
</style>

<!--显示文章标题导航-->
<div class="article_navigation" id="article_navigation"></div>

<p id="content_to_md">{{ article.content }}</p>


<script>
    //点击显示文章导航
    $("#showtitle").click(function () {
        if ($("#article_navigation").css("display") === 'block'){
            $("#article_navigation").css("display", "none");
        } else {
            $("#article_navigation").css("display", "block");
        }
    });

    //显示正文的导航标题锚点
    $(document).ready(function(e) {
        $("#content_to_md").children().each(function(index, element) {
            var tagName=$(this).get(0).tagName;
            if(tagName.substr(0,1).toUpperCase() === "H"){
                console.log(tagName);
                var contentH=$(this).html();//获取内容
                var markid="mark-"+tagName+"-"+index.toString();
                $(this).attr("id",markid);//为当前h标签设置id
                 let spaceNum =  "";
                if (tagName === 'H1') {
                    spaceNum =  "";
                } else if (tagName === 'H2') {
                    spaceNum =  "&nbsp;&nbsp;&nbsp;&nbsp;";
                }  else if (tagName === 'H3') {
                    spaceNum =  "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                } else if (tagName === 'H4') {
                    spaceNum =  "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                } else if (tagName === 'H5') {
                    spaceNum =  "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                } else if (tagName === 'H6') {
                    spaceNum =  "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }
                $("#article_navigation").append("<a href='#" + markid + "'>" + spaceNum + contentH + "</a>");//在目标DIV中添加内容
            }
        });
        console.log("标题导航锚点完成！");
    });
</script>

image.png

优化列表显示

修改js控制的html样式，使用text-indent进行缩进

//显示正文的导航标题锚点
$(document).ready(function(e) {
    $("#content_to_md").children().each(function(index, element) {
        var tagName=$(this).get(0).tagName;
        if(tagName.substr(0,1).toUpperCase() === "H"){
            console.log(tagName);
            var contentH=$(this).html();//获取内容
            var markid="mark-"+tagName+"-"+index.toString();
            $(this).attr("id",markid);//为当前h标签设置id
             let spaceNum =  "";
            if (tagName === 'H1') {
                spaceNum =  "";
            } else if (tagName === 'H2') {
                spaceNum =  "1.5";
            }  else if (tagName === 'H3') {
                spaceNum =  "3";
            } else if (tagName === 'H4') {
                spaceNum =  "4.5";
            } else if (tagName === 'H5') {
                spaceNum =  "6";
            } else if (tagName === 'H6') {
                spaceNum =  "7.5";
            }
            $("#article_navigation").append("<a href='#" + markid + "'" + " style='text-indent: " + spaceNum + "em'" + ">" + contentH + "</a>");//在目标DIV中添加内容
        }
    });
    console.log("标题导航锚点完成！");
});

image.png

参考网页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>jquery根据文章h标签自动生成导航目录</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
#content{padding-right:102px;}
.menu{width:90px; background:#fff; border:1px #32c6c6 solid; border-radius:4px; position:fixed; right:0; padding:0 6px;}
.menu a{width:100%; height:30px; line-height:30px; display:inline-block;}
</style>
<script>
$(document).ready(function(e) {
    $("#content").children().each(function(index, element) {
        var tagName=$(this).get(0).tagName;
        if(tagName.substr(0,1).toUpperCase()=="H"){  
            var contentH=$(this).html();//获取内容
            var markid="mark-"+tagName+"-"+index.toString();
            $(this).attr("id",markid);//为当前h标签设置id
            $(".menu").append("<a href='#"+markid+"'>"+contentH+"</a>");//在目标DIV中添加内容   
        }  
    });
});
</script>
</head>

<body>

<div class="menu"></div>
<div id="content">
。。
<h2>摘要</h2>
<div style="height:800px;">
说明
</div>
<h3>第1天</h3>
<div style="height:800px;">第1天内容</div>
<h3>第2天</h3>
<div style="height:800px;">第2天内容</div>
<h3>第3天</h3>
<div style="height:800px;">第3天内容</div>
<h3>第4天</h3>
<div style="height:800px;">第4天内容</div>
<h3>第5天</h3>
<div style="height:800px;">第5天内容</div>
</div>
</body>
</html>