代码实现

js代码

function GenerateContentList()
{
 var mainContent = $('#mulu');
 var h1_list = $('#haha h1');　　//如果你的章节标题不是h1,只需要将这里的h1换掉即可
  var h2_list = $('#haha h2');
 if(mainContent.length < 1)
  return;
  
 if(h1_list.length>0)
 {
  var content = '';
  content += '';
  content += ' <a class="title_menue">[文章目录]</a>';
  content += '<ol class="toc">';
  for(var i=0; i<h1_list.length; i++)
  {
   var go_to_top = '<a name="_label' + i + '"></a>';
   $(h1_list[i]).before(go_to_top);
    
   var h2_list = $(h1_list[i]).nextAll("h2");
   var li2_content = '';
   for(var j=0; j<h2_list.length; j++)
   {
    var tmp = $(h2_list[j]).prevAll('h1').first();
    if(!tmp.is(h1_list[i]))
     break;
    var li2_anchor = '<a pjax="no" name="_label' + i + '_' + j + '"></a>';
    $(h2_list[j]).before(li2_anchor);
    li2_content += '<li class="toc-item toc-level-' + i + '_' + j + '"><a pjax="no" class="toc-link" href="#_label' + i + '_' + j + '"><span class="toc-text">' + $(h2_list[j]).text() + '</span></a></li>';
   }
    
   var li1_content = '';
   if(li2_content.length > 0)
    li1_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li><ol class="toc-child">' + li2_content + '</ol>';
   else
    li1_content = '<li class="toc-item toc-level-' + i + '"><a  pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li>';
   content += li1_content;
  }
if($('#mulu').length != 0 )
  {
   $($('#mulu')[0]).prepend(content);
  }
 } else{

if(h1_list.length==0&&h2_list.length>0)
 {
  var content = '';
  content += '';
  content += '<a class="title_menue">[文章目录]</a>';
  content += '<ol class="toc">';
  for(var i=0; i<h2_list.length; i++)
  {
   var go_to_top = '<a  pjax="no" name="_label' + i + '"></a>';
   $(h2_list[i]).before(go_to_top);
    
   var h3_list = $(h2_list[i]).nextAll("h3");
   var li3_content = '';
   for(var j=0; j<h3_list.length; j++)
   {
    var tmp = $(h3_list[j]).prevAll('h2').first();
    if(!tmp.is(h2_list[i]))
     break;
    var li3_anchor = '<a  pjax="no" name="_label' + i + '_' + j + '"></a>';
    $(h3_list[j]).before(li3_anchor);
    li3_content += '<li class="toc-item toc-level-' + i + '_' + j + '"><a pjax="no" class="toc-link" href="#_label' + i + '_' + j + '"><span class="toc-text">' + $(h3_list[j]).text() + '</span></a></li>';
   }
    
   var li2_content = '';
   if(li3_content.length > 0)
    li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li><ol class="toc-child">' + li3_content + '</ol>';
   else
    li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li>';
   content += li2_content;
  }
if($('#mulu').length != 0 )
  {
   $($('#mulu')[0]).prepend(content);
  }
 } 
}
}
 GenerateContentList();

html代码

<tree id="mulu"></tree>

CSS代码

在手机上我也把这个div浮动在了右边，美化了一点点

#mulu{float:right;margin-left:10px;background:#f8f8f8;position:relative;z-index:998}
span.toc-text{color:#707070}
span.toc-text:hover{opacity:.8}
ol.toc{padding-left:15px;margin-left:6px;margin-top:0}
a.title_menue{padding-left:10px}
.toc-item{margin-left:10px;margin-right:10px}

食用方法

• JS代码加到foot.php 里面就行，或者保存到一个文件，然后再引用
• html代码加到post.php里面
  注意：

var h1_list = $('#haha h1');　　//如果你的章节标题不是h1,只需要将这里的h1换掉即可
  var h2_list = $('#haha h2');

意思为提取 "haha"的div中的标题，所以你需要在文章内容的div内再添加一个div,ID为"haha"

• CSS加到 style.css里面即可！

一个问题的解决记录

a标签失效的问题：

    position: relative;
    z-index: 998

使用 position和Z-index 是div图层在最上面即可！

代码来源

• 核心js代码来源：js 为博客文章自动生成目录
• css美化代码参考：目录索引