jQuery 实现支持分级标题标签的文章目录

Yujiaao 发布于2019-08-02 16:13 / 1728人阅读

摘要：背景首个版本修改意见鉴于单个标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦代码获取内容添加位置存入数组若存在标签滑动窗口时从开始获取当前位置获取上一个位置以备回滑滑过当前位置调至下一个位置滑回上一个位置调至上

背景 首个版本

https://www.ouorz.com/366

修改意见

鉴于单个 H 标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦

代码

var count_ti = count_in = count_ar = count_sc = count_hr = count_e = 1;
var offset = new Array;
$(".article-content h3").each(function () { //each获取h3内容
    $("#article-index").html($("#article-index").html() + "  " + $(this).eq(0).html() +
        "");
    $(this).eq(0).attr("id", "in" + (count_in++)); //h3添加id
    offset[0] = 0;
    offset[count_ar++] = $(this).eq(0).offset().top; //h3位置存入数组
    count_e++
});

if (count_e !== 1) { //若存在h3标签

    $(window).scroll(function () { //滑动窗口时
        var scroH = $(this).scrollTop() + 130;
        var navH = offset[count_sc]; //从1开始获取当前h3位置
        var navH_prev = offset[count_sc - 1]; //获取上一个h3位置(以备回滑)
        if (scroH >= navH) { //滑过当前h3位置
            $("#ti" + (count_sc - 1)).attr("class", "");
            $("#ti" + count_sc).attr("class", "active");
            count_sc++; //调至下一个h3位置
        }
        if (scroH <= navH_prev) { //滑回上一个h3位置,调至上一个h3位置
            $("#ti" + (count_sc - 2)).attr("class", "active");
            count_sc--;
            $("#ti" + count_sc).attr("class", "");
        }
    });

} else {
    $(".index-div").css("display", "none")
}

↑ JavaScript 代码

批注

$(“:header”) 可以获取标题标签（Hx）

prop(“tagName”).replace(‘H’, ”) 可以获取到标签级别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54909.html

jQuery 实现支持分级标题标签的文章目录

摘要：背景首个版本修改意见鉴于单个标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦代码获取内容添加位置存入数组若存在标签滑动窗口时从开始获取当前位置获取上一个位置以备回滑滑过当前位置调至下一个位置滑回上一个位置调至上背景首个版本 https://www.ouorz.com/366 修改意见鉴于单个 H 标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦代码 ...

余学文 2019-08-23 17:02 评论0 收藏0
jQuery 实现支持分级标题标签的文章目录

摘要：背景首个版本修改意见鉴于单个标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦代码获取内容添加位置存入数组若存在标签滑动窗口时从开始获取当前位置获取上一个位置以备回滑滑过当前位置调至下一个位置滑回上一个位置调至上背景首个版本 https://www.ouorz.com/366 修改意见鉴于单个 H 标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦代码 ...

Lyux 2019-08-29 18:40 评论0 收藏0
为你的文章生成目录索引

摘要：使用可以快速为你的页面生成目录的结构，拥有较强的可定制性，并且并不会擅自为你做太多的事情，以便你更容易地把应用到你的项目中。引言为页面中的标题元素建立目录索引，这是一个不起眼却很实用的功能，特别是对于那些含有篇幅很长的文章的页面，拥有一个目录可以让读者对文章的结构一目了然，更重要的是，读者可以很轻松地在文章的各个章节之间来回快速跳转，极大地提高了用户体验。 toc.js 使用 to...

魏宪会 2019-08-22 15:10 评论0 收藏0