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

短命女 2022-10-06 13:55 110阅读 0赞

背景

首个版本

修改意见

鉴于单个 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’, ”) 可以获取到标签级别

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 Hexo + yilia 主题实现文章目录

Hexo + yilia 主题实现文章目录 **1.hexo yilia 设置文章显示长度，不展开全文** yilia 主题中可以用截取文章的显示长度，如果你想在...

谁借莪１个温暖的怀抱￠/ 2024年04月17日 05:59/ 0 赞/ 68 阅读

相关 91.ROLLUP 实现的分级汇总案例

DECLARE @t TABLE(Item varchar(10),Color varchar(10),Quantity int) INSERT @t SELE

快来打我*/ 2024年02月19日 18:17/ 0 赞/ 41 阅读

相关 90.UNION ALL 实现的分级汇总案例

DECLARE @t TABLE(Item varchar(10),Color varchar(10),Quantity int) INSERT @t SELE

小咪咪/ 2024年02月19日 18:17/ 0 赞/ 53 阅读

相关 python实现矢量分级渲染_PIE SDK栅格分级渲染

/// /// 栅格分级渲染 /// /// /// private void toolStripButton\_RasterClassifyRender\_Clic

你的名字/ 2022年10月25日 15:25/ 0 赞/ 158 阅读

相关 html实现分级目录线,jQuery 实现支持分级标题标签的文章目录

背景首个版本修改意见鉴于单个 H 标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦代码 var count\_ti = count\_in =

短命女/ 2022年10月06日 13:55/ 0 赞/ 111 阅读

相关基于matlab的物料大小分级算法的实现

\[摘要\]本文以摄取的苹果图像为例,利用matlab对苹果的大小分级算法进行了仿真,为后续开发农产品物料图像分级系统的研究做铺垫。 \[关键词\]物料大小分级 matl

柔情只为你懂/ 2022年09月09日 09:51/ 0 赞/ 146 阅读

相关分级权限分配

[https://help.finereport.com/doc-view-711.html?&\_=1559207520060][https_help.finereport.

骑猪看日落/ 2022年04月25日 08:22/ 0 赞/ 448 阅读

相关 VUE+PostgreSQL+PostgREST实现用户权限安全分级

灰太狼/ 2022年04月08日 10:42/ 0 赞/ 553 阅读

相关文章目录

文章目录 JavaScript系列文章 [《JavaScript面向对象》(七篇已完结)][JavaScript] [《JavaScript原型与原型链

痛定思痛。/ 2022年03月27日 07:40/ 0 赞/ 236 阅读

相关 java日志分级概要

记录一下，用于以后的规范化 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

爱被打了一巴掌/ 2021年07月20日 20:44/ 0 赞/ 356 阅读