jquery根据文章h标签自动生成导航目录

半兽人 发表于: 2020-01-09   最后更新时间: 2020-01-09  

为了让读者更便捷的读取信息,我们使用jquery根据文章h标签自动生成锚链接导航目录,效果图:

jquery根据文章h标签自动生成导航目录

代码如下:

<!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:200px; 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
                    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";
                    }
                    spaceNum+="em";
                    $(".menu").append("<a href='#"+markid+"' style='text-indent:"+spaceNum+"'>"+contentH+"</a>");//在目标DIV中添加内容
                }
            });
        });
    </script>
</head>

<body>

<div class="menu"></div>
<div id="content">
    <h1>主题</h1>
    <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>

    <h1>主题</h1>
    <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>


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: JS中的运算符&&、||,位运算符|,&
下一条: 在pre代码块中添加“复制”按钮