帝国cms文章内容页H2H3实现目录功能

之前有网友在文章评论咨询了关于帝国cms文章内容页H2/H3如何生成目录的问题，其实文章生成目录，无非就是JS判断h2、h3的问题。无关是wordpress博客程序还是帝国cms程序。

这里简单照搬网上《博客园博客自动生成章节目录索引》的方法实现，先看效果图，再看代码

帝国cms文章生成目录JS代码:

<script>   $(document).ready(function() {               //生成目录索引列表               function GenerateContentList() {                   var jquery_h2_list = $('.article-content h2'); //如果你的章节标题不是h2,只需要将这里的h2换掉即可                   if (jquery_h2_list.length > 0) {                       var content = '<div class="catalogue-box"><a name="_labelTop"></a>';                       content += '<div class="catalogue"><div class="catalogue-title"><i class="iconfont icon-mulu"></i>文章目录</div><div class="catalogue-content"> ';                       content += '<ul class="tr1">';                       for (var i = 0; i < jquery_h2_list.length; i++) {                           var go_to_top = '<div><a name="_lab' + i + '"></a></div>';                           $(jquery_h2_list[i]).before(go_to_top);                           var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h2_list[i]).text() + '</a>';                           var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i + 1], "h3");                           if (jquery_h3_list.length > 0) {                               li_content += '<ul>';                           }                           for (var j = 0; j < jquery_h3_list.length; j++) {                               var go_to_top2 = '<div><a name="_lab2' + i + j + '"></a></div>';                               $(jquery_h3_list[j]).before(go_to_top2);                               li_content += '<li><a href="#_lab2' + i + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';                           }                           if (jquery_h3_list.length > 0) {                               li_content += '</ul>';                           }                           li_content += '</li>';                           content += li_content;                       }                       content += '</ul>';                       content += '</div></div>';                       if ($('.article-content').length != 0) {                           $($('.article-content')[0]).prepend(content);                       }                   }               }               GenerateContentList();      });</script> 

帝国cms文章生成目录css样式:

<style type="text/css">.catalogue-box {    float: right;    border: 1px solid #DEDFE1;    max-width: 350px;    min-width: 300px;    -moz-border-radius: 6px;    margin: 0 0 20px 15px;    padding: 10px 6px;    font-size: 14px;}.catalogue-title {    border-bottom: 1px dashed #DDD;    display: block;    line-height: 30px;    padding: 0 4px;    color: #333;}.catalogue-box ul li {    white-space: nowrap;        text-overflow: ellipsis;        overflow: hidden;    list-style-type: disc;    padding: 0;    margin: 0 0 0 25px;}.catalogue-box ul li a {    outline: none;    color: #888;    text-decoration: none;    background: transparent;}</style>

注意，这里只是H2、H3生成了文章目录，其他标题标签不起作用

注意要点一：.article-content h2，是文章内容div.article-content容器内h2

<div class="article-content">    <!-- 这里是文章内容 -->    <h2></h2>    <h3></h3></div> 

注意要点二：以下这段代码中.article-content，是指目录生成的位置，如果想要在内容页则改成内容页对应的div.article-content这类容器，如果想在侧边栏实现则在容器div.sidebar或者div.aside容器内的加入一个div.catalogu容器也行

if ($('.article-content').length != 0) {   $($('.article-content')[0]).prepend(content);}

如果想要目录随侧边栏滚动，也很简单直接百度搜索，JS实现页面侧边栏浮动跟随，查找相关代码，套上即可，这里就不多加赘余介绍了。