jQuery 實(shí)現(xiàn)支持分級標(biāo)題標(biāo)簽的文章目錄

Lyux 發(fā)布于2019-08-29 18:40 / 2208人閱讀

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

背景 首個(gè)版本

https://www.ouorz.com/366

修改意見

鑒于單個(gè) H 標(biāo)簽設(shè)置比較麻煩糾結(jié)，而且有主題用戶反饋，索性改成可以分級的啦

代碼

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內(nèi)容
    $("#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位置存入數(shù)組
    count_e++
});

if (count_e !== 1) { //若存在h3標(biāo)簽

    $(window).scroll(function () { //滑動窗口時(shí)
        var scroH = $(this).scrollTop() + 130;
        var navH = offset[count_sc]; //從1開始獲取當(dāng)前h3位置
        var navH_prev = offset[count_sc - 1]; //獲取上一個(gè)h3位置(以備回滑)
        if (scroH >= navH) { //滑過當(dāng)前h3位置
            $("#ti" + (count_sc - 1)).attr("class", "");
            $("#ti" + count_sc).attr("class", "active");
            count_sc++; //調(diào)至下一個(gè)h3位置
        }
        if (scroH <= navH_prev) { //滑回上一個(gè)h3位置,調(diào)至上一個(gè)h3位置
            $("#ti" + (count_sc - 2)).attr("class", "active");
            count_sc--;
            $("#ti" + count_sc).attr("class", "");
        }
    });

} else {
    $(".index-div").css("display", "none")
}

↑ JavaScript 代碼

批注

$(“:header”) 可以獲取標(biāo)題標(biāo)簽（Hx）

prop(“tagName”).replace(‘H’, ”) 可以獲取到標(biāo)簽級別

云服務(wù)器 GPU云服務(wù)器 c語言實(shí)現(xiàn)聊天服務(wù)器 [標(biāo)簽:標(biāo)題] 用c語言實(shí)現(xiàn)多表密碼[標(biāo)簽:標(biāo)題] 購買備案的域名 [標(biāo)簽:標(biāo)題] 存儲文件的軟件 [標(biāo)簽:標(biāo)題]

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114493.html

發(fā)表評論

登陸后可評論

0條評論

Lyux

男|高級講師

我要關(guān)注我要私信

TA的文章

為什么把沒帶www域名，通過301重定向到帶www的上面?

閱讀 2313·2021-11-24 10:26
分享一下軟件測試面試歷程和套路，真的很實(shí)在

閱讀 2869·2021-11-23 09:51
什么是嵌入式開發(fā)？為什么用C語言作為開發(fā)語言？

閱讀 2973·2021-10-08 10:05
云主機(jī)如何使用-云主機(jī)怎么使用？

閱讀 1767·2021-09-22 15:18
SCSS 日常用法

閱讀 1698·2019-08-29 18:45
jQuery 實(shí)現(xiàn)支持分級標(biāo)題標(biāo)簽的文章目錄

閱讀 2209·2019-08-29 18:40
CSS

閱讀 3401·2019-08-29 16:16
原生js實(shí)現(xiàn)在表格用鼠標(biāo)框選并有反選功能

閱讀 2960·2019-08-29 14:21

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery 實(shí)現(xiàn)支持分級標(biāo)題標(biāo)簽的文章目錄

相關(guān)文章