资讯专栏INFORMATION COLUMN

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

Lyux / 2008人阅读

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

背景 首个版本

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/114493.html

    相关文章

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

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

      Yujiaao 评论0 收藏0
    • jQuery 实现支持分级标题标签文章目录

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

      余学文 评论0 收藏0
    • jQuery 实现支持分级标题标签文章目录

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

      opengps 评论0 收藏0
    • 为你文章生成目录索引

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

      魏宪会 评论0 收藏0
    • HTML入门学习笔记(一)

      摘要:元素表示主导链接的区域。已经习惯使用或元素对链接进行结构化的情况下,并没有取代这种最佳实践,只不过在它们外围包上了一个。不允许将嵌套在内。 第一章 网页的构造块 一个网页主要包括文本内容、对其它文件的引用和标记。 语义化HTML:有含义的标记 HTML包含关于文档中内容的信息,这些信息称作标记,用以描述内容的含义,即语义。也就是说,HTML仅仅关心网页中要展示的内容,至于如何展示,那是...

      fox_soyoung 评论0 收藏0

    发表评论

    0条评论

    Lyux

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <