您现在的位置是：网站首页 >网页前端网页前端

根据文章正文自动生成导航目录并添加锚点

admin2018年11月2日 22:34 【Html | JavaScript | JQuery 】 1360人已围观

# 获取正文部分标题组合成锚点导航目录 html正文，点击按钮切换标题栏的显示与隐藏 ```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 = "    "; } else if (tagName === 'H3') { spaceNum = "      "; } else if (tagName === 'H4') { spaceNum = "          "; } else if (tagName === 'H5') { spaceNum = "              "; } else if (tagName === 'H6') { spaceNum = "                  "; } $("#article_navigation").append("<a href='#" + markid + "'>" + spaceNum + contentH + "</a>");//在目标DIV中添加内容 } }); console.log("标题导航锚点完成！"); }); </script> ``` ![BLOG_20181102_224500_53](/media/blog/images/2018/11/BLOG_20181102_224500_53.png "博客图集BLOG_20181102_224500_53.png") ## 优化列表显示修改js控制的html样式，使用`text-indent`进行缩进 ```JavaScript //显示正文的导航标题锚点 $(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("标题导航锚点完成！"); }); ``` ![BLOG_20181102_230833_40](/media/blog/images/2018/11/BLOG_20181102_230833_40.png "博客图集BLOG_20181102_230833_40.png") ## 优化自动变化导航列表高度 ```JavaScript //点击显示文章导航 $("#showtitle").click(function () { if ($("#article_navigation").css("display") === 'block'){ $("#article_navigation").css("display", "none"); } else { //文章导航定位，是否显示滚动条 let windowHeight = $(window).height(); //console.log('窗口高度：' + windowHeight); let titleNavHeight = $("#article_navigation").height(); //console.log('article_navigation元素高度：' + titleNavHeight); $("#article_navigation").css({ "display": "block", "margin-top": 100, "max-height": windowHeight - 200 //上下各预留100 }); } }); ``` # 参考网页 ```html <!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> ```