用 jQuery 写一个获取文章目录的功能

ID: 366 发布于: 2019-03-05 23:10:54

修改意见

鉴于单个 H 标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦

代码

/* 文章目录 */
                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>&nbsp;&nbsp;' + $(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', '') 可以获取到标签级别

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

Subscribe

Comments