1

1-1

1-1-1

1-1-2

1-1-3

2

2-1

2-1-1?

2-1-2

2-1-3?

看到博客園有的博主博文有目錄結(jié)構(gòu)，感覺特別的清晰。但是看他們大都只有二級(jí)目錄結(jié)構(gòu)，于是自己改了一下，弄了自己的三級(jí)目錄結(jié)構(gòu)。文章前面就是顯示的效果。

代碼如下

<script language = "javascript" type = "text/javascript" >function GenerateContentList() {var mainContent = $('#cnblogs_post_body');var h2_list = $('#cnblogs_post_body h2');if (mainContent.length < 1) {return;}if (h2_list.length > 0) {var content = '<a name="_labelTop"></a>';content += '<div id="navCategory" style="color:#152e97;">';content += '<p style="font-size:18px;"><b>目錄</b></p>';content += '<ul>';var li2_content = '';for (var i = 0; i < h2_list.length; i++) { //循環(huán)標(biāo)簽2var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">反回頂部</a><a name="_label2-' + i + '"></a></div>';$(h2_list[i]).before(go_to_top);var h3_list = $(h2_list[i]).nextAll("h3");var li3_content = ''if (h3_list.length > 0) {for (var j = 0; j < h3_list.length; j++) {var tmp = $(h3_list[j]).prevAll('h2').first(); // h3前面的所有h2，會(huì)從靠近該h3往前，假如當(dāng)前是h2[1]下面的h3[0] 那么preAll: [h2[1],h2[0]]if (!tmp.is(h2_list[i])) { // 判斷當(dāng)前h3的父級(jí)h2是不是本次循環(huán)的父級(jí)h2，不是則說(shuō)明，該h3不屬于本次循環(huán)的h2break; //不屬于該h2的，h3則退出}var li3_anchor = '<a name="_label2-' + i + '_label3-' + j + '"></a>'; // 建立錨點(diǎn)$(h3_list[j]).before(li3_anchor); // 該標(biāo)簽行添加錨點(diǎn)var h4_list = $(h3_list[j]).nextAll("h4");if (h4_list.length > 0) {var li4_content = '';for (var k = 0; k < h4_list.length; k++) {var tmp1 = $(h4_list[k]).prevAll('h3').first();if (!tmp1.is(h3_list[j])) {break;}var li4_anchor = '<a name="_label2-' + i + '_label3-' + j + '_label4-' + k + '"></a>'; // 建立錨點(diǎn)$(h4_list[j]).before(li4_anchor); // 該標(biāo)簽行添加錨點(diǎn)li4_content += '<li><a href="#_label2-' + i + '_label3-' + j + '_label4-' + k + '">' + $(h4_list[k]).text() + '</a></li>'; // 目錄4內(nèi)容}li3_content += '<li><a href="#_label2-' + i + '_label3-' + j + '">' + $(h3_list[j]).text() + '</a><ul>' + li4_content + '</ul></li>'; // 目錄3內(nèi)容+目錄4} else {li3_content += '<li><a href="#_label2-' + i + '_label3-' + j + '">' + $(h3_list[j]).text() + '</a></li>'; // 目錄3內(nèi)容}}li2_content += '<li><a href="#_label2-' + i + '">' +$(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; // 目錄2內(nèi)容+ 目錄3} else {li2_content += '<li><a href="#_label2-' + i + '">' +$(h2_list[i]).text() + '</a></li>';// 目錄2內(nèi)容}}content += li2_content;content += '</ul>';content += '</div><p>&nbsp;</p>';if ($('#cnblogs_post_body').length != 0) {$($('#cnblogs_post_body')[0]).prepend(content);}}};GenerateContentList();</script>

開通JS權(quán)限后，粘貼到頁(yè)腳代碼就OK了

<script language="javascript" type="text/javascript"> // 生成目錄索引列表 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html // modified by: zzq function GenerateContentList() {var mainContent = $('#cnblogs_post_body');var h2_list = $('#cnblogs_post_body h2');//如果你的章節(jié)標(biāo)題不是h2,只需要將這里的h2換掉即可if (mainContent.length < 1)return;if (h2_list.length>0) // 如果二級(jí)目錄不為空{(diào)var content = '<a name="_labelTop"></a>'; // 頂部content += '<div id="navCategory" style="color:#152e97;">';content += '<p style="font-size:18px;"><b>目錄</b></p>';content += '<ol>';for (var i=0; i<h2_list.length; i++) // 循環(huán)每個(gè)h2章節(jié)標(biāo)題下面的低級(jí){var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">返回頂部</a><a name="_label' + i + '"></a></div>';$(h2_list[i]).before(go_to_top); // 在每個(gè)h2章節(jié)的前面添加回到頂部的標(biāo)簽var h3_list = $(h2_list[i]).nextAll("h3"); //找到所有的h3var li3_content = ''; // h3的內(nèi)容for (var j=0; j<h3_list.length; j++) //循環(huán)h3{var tmp = $(h3_list[j]).prevAll('h3').first();if (!tmp.is(h2_list[i]))break;var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';$(h3_list[j]).before(li3_anchor);li3_content += '<li><a href="#_label' + i + '_' + j + '"style="font-size:12px;color:#2b6695;">' + $(h3_list[j]).text() + '</a></li>';}var li2_content = '';if(li3_content.length > 0)li2_content = '<li><a href="#_label' + i + '"style="font-size:12px;color:#2b6695;">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';elseli2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';content += li2_content;}content += '</ol>';content += '</div><p>&nbsp;</p>';content += '<hr />';if($('#cnblogs_post_body').length != 0 ){$($('#cnblogs_post_body')[0]).prepend(content);}} }GenerateContentList(); </script> 二級(jí)目錄結(jié)構(gòu)

總結(jié)

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

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