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

背景

首个版本

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() + '<li id="ti' + (count_ti++) +
        '"><a onclick="$(\'body\').animate({ scrollTop: $(\'#in' + (count_hr++) +
        '\').offset().top - 100 }, 500);"><i class="czs-circle-l"></i>  ' + $(this).eq(0).html() +
        '</a></li>');
    $(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’, ”) 可以获取到标签级别