在博客園開通博客以后，就看到某位博友寫的js自動生成目錄的文章，當時覺得生成目錄能給閱讀帶來方便，所以就直接拿來使用了。用了一段時間以后，發(fā)現只能生成一級目錄，不能生成多級目錄，有點美中不足。所以想著自己修改一下代碼，實現二級目錄甚至三級目錄。先附上初始的代碼，并且在這感謝那位博友。

1、一級目錄代碼

<script language="javascript" type="text/javascript"> //生成目錄索引列表 function GenerateContentList() {var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章節(jié)標題不是h3,只需要將這里的h3換掉即可if(jquery_h3_list.length>0){var content = '<a name="_labelTop"></a>';content += '<div id="navCategory">';content += '<p style="font-size:18px"><b>閱讀目錄</b></p>';content += '<ul>';for(var i =0;i<jquery_h3_list.length;i++){var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';$(jquery_h3_list[i]).before(go_to_top);var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';content += li_content;}content += '</ul>';content += '</div>';if($('#cnblogs_post_body').length != 0 ){$($('#cnblogs_post_body')[0]).prepend(content);}} } GenerateContentList(); </script>

2、二級目錄代碼

　　上段代碼只能生成一級目錄，下面附上自己修改生成二級目錄的源碼，h3標簽為一級，h4標簽為二級。有需要的朋友，可以拿去修改修改再使用。

<!--目錄CSS樣式--> <style type="text/css"> .moveBar {right:0; top:0;border: solid 1px #777;width:200px; position:fixed; padding:5px; text-align:center; font-weight:bold; }</style> <!--生成目錄--> <script language="javascript" type="text/javascript"> //生成目錄索引列表 function GenerateContentList() {var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章節(jié)標題不是h3,只需要將這里的h3換掉即可if(jquery_h3_list.length>0){var content = '<a name="_labelTop"></a>';content += '<div class="moveBar" style="color:#777;" ><div id="banner"><p style="font-size:18px"><b>閱讀目錄</b></p>
</div><div class="content"> ';content += '<ul style="list-style-type:none;text-align: left;margin:2px 2px;">';for(var i =0;i<jquery_h3_list.length;i++){var go_to_top = '<div style="text-align: right"><a name="_lab' + i + '"></a></div>';$(jquery_h3_list[i]).before(go_to_top);var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h3_list[i]).text() + '</a>';var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h4");if(jquery_h4_list.length>0){li_content +='<ul style="list-style-type:none;text-align: left;margin:2px 2px;">';}for(var j = 0;j < jquery_h4_list.length;j++){var go_to_top2 = '<div style="text-align: right"><a name="_lab2'+ i + j + '"></a></div>';$(jquery_h4_list[j]).before(go_to_top2);li_content +='<li><a href="#_lab2'+ i + j + '">' + $(jquery_h4_list[j]).text() + '</a></li>';}if(jquery_h4_list.length>0){li_content +='</ul>';}li_content +='</li>';content += li_content;}content += '</ul>';content += '</div>';if($('#cnblogs_post_body').length != 0 ){$($('#cnblogs_post_body')[0]).prepend(content);}} } GenerateContentList(); </script>

3、代碼使用方法

• 博客園使用自己編寫的js代碼需要申請開通權限，先申請開通。
• 將二級代碼中的CSS樣式復制到頁首Html代碼框中。
• 將二級代碼中的Jquery代碼復制到頁腳Html代碼框中（其實復制到頁首框也沒影響）。
• 在寫博客時，將一級標題設置標題3屬性，將二級標題設置標題4屬性，發(fā)布以后就能自動生成二級目錄了。

　　效果圖，這里我將目錄設置成了固定在右側頂部，這樣就不會影響閱讀了。

轉載于:https://www.cnblogs.com/hehaiyang/p/4466811.html

總結

以上是生活随笔為你收集整理的Jquery实现自动生成二级目录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。