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

背景

首个版本

修改意见

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