背景
首个版本
用 jQuery 写一个获取文章目录的功能
ID: 366 发布于: 2019-03-05 23:10:54
修改意见
鉴于单个 H 标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦
代码
代码语言：javascript复制/* 文章目录 */
var h = 0;
var pf = 23;
var i = 0;
$('#article-index').html('');
var count_ti = count_in = count_ar = count_sc = count_hr = count_e = 1;
var offset = new Array;
var min = 0;
var c = 0;
var icon = '';
//获取最高级别h标签
$(".article-content>:header").each(function () {
h = $(this).eq(0).prop("tagName").replace('H', '');
if(c == 0){
min = h;
c ;
}else{
if(h <= min){
min = h;
}
}
});
//获取h标签内容
$(".article-content>:header").each(function () {
h = $(this).eq(0).prop("tagName").replace('H', ''); //标签级别
for (i = 0; i < Math.abs(h-min); i){ //偏移程度
pf = 10;
}
if(pf!==23){ //图标
icon = 'czs-square-l';
}else{
icon = 'czs-circle-l';
}
$('#article-index').html($('#article-index').html() '<li id="ti' (count_ti )
'" style="padding-left:' pf 'px"><a><i class="' icon '"></i> ' $(this).eq(0).text().replace(/[ ]/g, "") '</a></li>'); //创建目录
$(this).eq(0).attr('id', 'in' (count_in )); //添加id
offset[0] = 0;
offset[count_ar ] = $(this).eq(0).offset().top; //位置存入数组
count_e ;
pf = 23; //设置初始偏移值
i = 0; //设置循环开始
})
//跳转对应位置事件
$('#article-index li').click(function () {
$('html,body').animate({
scrollTop: ($('#in' $(this).eq(0).attr('id').replace('ti', '')).offset().top - 100)
}, 500);
});
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', '') 可以获取到标签级别
