友人C

动手加上实用而简单的目录树
其实就是想想试试PS的制作长阴影的插件==(传送门:http://lab.rayps.com/lsg/) 也是记...
扫描右侧二维码阅读全文
19
2016/09

动手加上实用而简单的目录树

menue.jpg

其实就是想想试试PS的制作长阴影的插件==(传送门:http://lab.rayps.com/lsg/

也是记录下来。

HTML结构

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

说明一下:

把这段代码插到post.php 文章内容的div下面即可!
把代码中的#haha改成你的文章内容div 的 ID。
调用文章内容的php代码是<?php parseContent($this); ?>即,用div层把这段内容包括起来就行。

代码来自这篇文章:js为博客文章自动生成目录

JS 代码

function GenerateContentList() {
    var mainContent = $("#mulu");
    var h1_list = $("#haha 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();

CSS代码

我根据小伙伴|真|以歌。先生的目录树基础上写的。

悬浮在文章右侧,你可以根据你的主题进行修改。

#mulu {
    float: right;
    margin-left: 10px;
    background: #f8f8f8;
    position: relative;
    z-index: 100
}

span.toc-text {
    color: #707070
}

span.toc-text:hover {
    color: #adadad;
}

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
}

撒花!!动手起来,开始享受你的文章目录树吧!

最后修改:2016 年 10 月 29 日 05 : 26 PM
如果觉得我的文章对你有用,请随意赞赏

25 条评论

  1. 尚寂新

    这个配合pjax.js使用直接爆炸啊 直接重载GenerateContentList();的话目录会好几个文章的目录树堆在一起...

    1. 友人C
      @尚寂新

      这个,我好久没看了,现在用的是一个开源项目:

      http://gregfranko.com/jquery.tocify.js/
  2. CSD

    你们为啥这么渴望小男孩#

    1. 一日
      @CSD

      因为那个图片可爱啊,而且和我以前QQ空间头像一样

  3. Cononico

    厉害啊

    1. 一日
      @Cononico

      学长带我#[爱心]

      1. Cononico
        @一日 (击掌)
        1. 一日
          @Cononico (欢呼)
  4. 千千

    哈哈,那小男孩是专属于我的啦

    1. 一日
      @千千

      恩!不和你抢了#[捂嘴笑]

      1. 千千
        @一日 [乖]
  5. 千千

    今天刚刚看了二进制树

    1. 一日
      @千千

      我们只学了二叉树,现在在学查找和排序。。。#[心碎]好难

      1. 千千
        @一日

        加油!

        1. 一日
          @千千

          恩!

  6. 千千

    又偷走了我的背景

    1. 一日
      @千千

      我把 小男孩去掉了啊# 这样算只偷了一个

      1. 千千
        @一日 可是每次都发现和我的很像
        1. 一日
          @千千 [乖]但是你的背景就是好看
          1. 千千
            @一日

            因为我找了很久很久很久很久的#[乖]

            1. 一日
              @千千 (投降)
              1. 千千
                @一日 (不出所料)
  7. CSD

    我博客恢复咯~过来打个招呼~#

发表评论