1

1-1

1-1-1

1-1-2

1-1-3

2

2-1

2-1-1

2-1-2

2-1-3


看到博客园有的博主博文有目录结构,感觉特别的清晰。但是看他们大都只有二级目录结构,于是自己改了一下,弄了自己的三级目录结构。文章前面就是显示的效果。

代码如下

<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++) { //循环标签2 var 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,会从靠近该h3往前,假如当前是h2[1]下面的h3[0] 那么preAll: [h2[1],h2[0]] if (!tmp.is(h2_list[i])) { // 判断当前h3的父级h2是不是本次循环的父级h2,不是则说明,该h3不属于本次循环的h2 break; //不属于该h2的,h3则退出  } var li3_anchor = '<a name="_label2-' + i + '_label3-' + j + '"></a>'; // 建立锚点 $(h3_list[j]).before(li3_anchor); // 该标签行添加锚点 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>'; // 建立锚点 $(h4_list[j]).before(li4_anchor); // 该标签行添加锚点  li4_content += '<li><a href="#_label2-' + i + '_label3-' + j + '_label4-' + k + '">' + $(h4_list[k]).text() + '</a></li>'; // 目录4内容  }
                            li3_content += '<li><a href="#_label2-' + i + '_label3-' + j + '">' + $(h3_list[j]).text() + '</a><ul>' + li4_content + '</ul></li>'; // 目录3内容+目录4 } else {
                            li3_content += '<li><a href="#_label2-' + i + '_label3-' + j + '">' +  $(h3_list[j]).text() + '</a></li>'; // 目录3内容  }
                    }
                    li2_content += '<li><a href="#_label2-' + i + '">' +$(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; // 目录2内容+ 目录3 } else {
                    li2_content += '<li><a href="#_label2-' + i + '">' +$(h2_list[i]).text() + '</a></li>';// 目录2内容  }
            }


            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权限后,粘贴到页脚代码就OK了


watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
<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');//如果你的章节标题不是h2,只需要将这里的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 += '<ol>'; for (var i=0; i<h2_list.length; i++) // 循环每个h2章节标题下面的低级  { 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); // 在每个h2章节的前面添加回到顶部的标签 var h3_list = $(h2_list[i]).nextAll("h3"); //找到所有的h3 var li3_content = ''; // h3的内容 for (var j=0; j<h3_list.length; j++) //循环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>'; else li2_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>
二级目录结构


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部