代码实现

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图层在最上面即可!

代码来源

最后修改:2019 年 03 月 21 日 03 : 04 PM
如果觉得我的文章对你有用,请随意赞赏