jQuery 實現支持分級標題標簽的文章目錄

Lyux 發布于2019-08-29 18:40 / 2141人閱讀

摘要：背景首個版本修改意見鑒于單個標簽設置比較麻煩糾結，而且有主題用戶反饋，索性改成可以分級的啦代碼獲取內容添加位置存入數組若存在標簽滑動窗口時從開始獲取當前位置獲取上一個位置以備回滑滑過當前位置調至下一個位置滑回上一個位置調至上

背景 首個版本

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() + "  " + $(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’, ”) 可以獲取到標簽級別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114493.html

jQuery 實現支持分級標題標簽的文章目錄

摘要：背景首個版本修改意見鑒于單個標簽設置比較麻煩糾結，而且有主題用戶反饋，索性改成可以分級的啦代碼獲取內容添加位置存入數組若存在標簽滑動窗口時從開始獲取當前位置獲取上一個位置以備回滑滑過當前位置調至下一個位置滑回上一個位置調至上背景首個版本 https://www.ouorz.com/366 修改意見鑒于單個 H 標簽設置比較麻煩糾結，而且有主題用戶反饋，索性改成可以分級的啦代碼 ...

Yujiaao 2019-08-02 16:13 評論0 收藏0
jQuery 實現支持分級標題標簽的文章目錄

摘要：背景首個版本修改意見鑒于單個標簽設置比較麻煩糾結，而且有主題用戶反饋，索性改成可以分級的啦代碼獲取內容添加位置存入數組若存在標簽滑動窗口時從開始獲取當前位置獲取上一個位置以備回滑滑過當前位置調至下一個位置滑回上一個位置調至上背景首個版本 https://www.ouorz.com/366 修改意見鑒于單個 H 標簽設置比較麻煩糾結，而且有主題用戶反饋，索性改成可以分級的啦代碼 ...

余學文 2019-08-23 17:02 評論0 收藏0
為你的文章生成目錄索引

摘要：使用可以快速為你的頁面生成目錄的結構，擁有較強的可定制性，并且并不會擅自為你做太多的事情，以便你更容易地把應用到你的項目中。引言為頁面中的標題元素建立目錄索引，這是一個不起眼卻很實用的功能，特別是對于那些含有篇幅很長的文章的頁面，擁有一個目錄可以讓讀者對文章的結構一目了然，更重要的是，讀者可以很輕松地在文章的各個章節之間來回快速跳轉，極大地提高了用戶體驗。 toc.js 使用 to...

魏憲會 2019-08-22 15:10 評論0 收藏0