H标签自动生成文章目录

Question

网上找的，H2标签自动生成文章目录要怎么修改

我现在这样的不太好看，https://www.hz102.com/cms/show-510.html

<style>
#content{padding-right:102px;}
.menu{width:100px; background:#fff; border:1px #32c6c6 solid; border-radius:4px; position:fixed; right:0; margin-top: -300px; padding:0 6px;}
.menu a{width:100%; height:5px; line-height:5px; 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>

Answer 1

只显示 h2 加个判断 呗 。
你都 获取到 tagName 了再判断一下呗

 $(document).ready(function (e) {
        $("#content").children().each(function (index, element) {
            var tagName = $(this).get(0).tagName;
            if (tagName.substr(0, 1).toUpperCase() == "H" && (tagName == "h2" || tagName == "H2")) {
                var contentH = $(this).html();//获取内容
                var markid = "mark-" + tagName + "-" + index.toString();
                $(this).attr("id", markid);//为当前h标签设置id

                $(".menu").append("<a href='#" + markid + "'>" + contentH + "</a>");//在目标DIV中添加内容   
            }
        });
    })