请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

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

个人博客 2020-12-07 10:39 OrcHome 70
为了让读者更便捷的读取信息,我们使用jquery根据文章h标签自动生成锚链接导航目录,效果图:代码如下:<!doctypehtml><html><head><metacharset="utf-8"><title>jquery根据文章h标...

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

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

  代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery根据文章h标签自动生成导航目录</title>
<script src="https://file.cbing.net/js/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>

本文转载:OrcHome https://www.orchome.com/6777

特别声明:本文仅供交流学习 , 版权归属原作者,部分文章推送时未能及时与原作者取得联系,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。若本文来源标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

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

本文地址:https://www.cbing.net/daima/10.html

分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1