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