js代碼

<script language="javascript" type="text/javascript"> //生成目錄索引列表 function GenerateContentList() {var jquery_h1_list = $('#cnblogs_post_body h1');if (jquery_h1_list.length == 0) { return; }if ($('#cnblogs_post_body').length == 0) { return; }var content = '<a name="_labelTop"></a>';content += '<div id="navCategory">';content += '<p style="font-size:18px"><b>閱讀目錄(Content)</b></p>';// 一級(jí)目錄 startcontent += '<ul class="first_class_ul">';for (var i = 0; i < jquery_h1_list.length; i++){var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';$(jquery_h1_list[i]).before(go_to_top);// 一級(jí)目錄的一條var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';var nextH1Index = i + 1;if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");// 二級(jí)目錄 startif (jquery_h2_list.length > 0){//li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';li_content += '<ul class="second_class_ul">';}for (var j = 0; j < jquery_h2_list.length; j++){var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label2' + i + '"></a></div>';$(jquery_h2_list[j]).before(go_to_top2);// 二級(jí)目錄的一條li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';var nextH2Index = j + 1;var next;if (nextH2Index == jquery_h2_list.length) {if (i + 1 == jquery_h1_list.length){next = jquery_h1_list[0];}else{next = jquery_h1_list[i + 1];}}else{next = jquery_h2_list[nextH2Index];}var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");// 三級(jí)目錄 startif (jquery_h3_list.length > 0){li_content += '<ul class="third_class_ul">';}for (var k = 0; k < jquery_h3_list.length; k++){var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label3' + i + '"></a></div>';$(jquery_h3_list[k]).before(go_to_third_Content);// 三級(jí)目錄的一條li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';}if (jquery_h3_list.length > 0){li_content += '</ul>';}li_content += '</li>';// 三級(jí)目錄 end}if (jquery_h2_list.length > 0){li_content +='</ul>';}li_content +='</li>';// 二級(jí)目錄 endcontent += li_content;}// 一級(jí)目錄 endcontent += '</ul>';content += '</div>';$($('#cnblogs_post_body')[0]).prepend(content); }GenerateContentList(); </script>　

css美化

<style type="text/css">#cnblogs_post_body{color: black;font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;font-size: 16px;}#cnblogs_post_body h1 {background: #1E9FFF;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 17px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 !important;padding: 5px 0 5px 5px;text-shadow: 1px 1px 1px #222222;}#cnblogs_post_body h2 {background: #1E9FFF;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 17px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 !important;padding: 5px 0 5px 5px;}#cnblogs_post_body h3{background:#5FB878;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 13px;font-weight: bold;height: 24px;line-height: 23px;margin: 12px 0 !important;padding: 5px 0 5px 5px;}#cnblogs_post_body a{display: block;transition:all 1s;}#back-to-top {background-color: #00CD00;bottom: 0;box-shadow: 0 0 6px #00CD00;color: #444444;padding: 10px 10px;position: fixed;right: 50px;cursor: pointer;} .cnblogs_code{display: -webkit-box;overflow-x: scroll; } .cnblogs_code_hide{width:170%; } ::-webkit-scrollbar {/*隱藏滾輪*/ display: none; } </style>

　　

　　

轉(zhuǎn)載于:https://www.cnblogs.com/yanmingyuan/p/10588069.html

總結(jié)

以上是生活随笔為你收集整理的博客生成目录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。