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

余學(xué)文發(fā)布于2019-08-23 17:02 / 3648人閱讀

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

背景 首個(gè)版本

https://www.ouorz.com/366

修改意見(jiàn)

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

代碼

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 () { //滑動(dòng)窗口時(shí)
        var scroH = $(this).scrollTop() + 130;
        var navH = offset[count_sc]; //從1開(kāi)始獲取當(dāng)前h3位置
        var navH_prev = offset[count_sc - 1]; //獲取上一個(gè)h3位置(以備回滑)
        if (scroH >= navH) { //滑過(guò)當(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)簽級(jí)別

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103722.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

余學(xué)文

男|高級(jí)講師

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

TA的文章

Akkocloud：鎮(zhèn)江AMD Ryzen高防獨(dú)立服務(wù)器549元/月（五線BGP，50G防御）

閱讀 1844·2021-09-14 18:03
使用這些 CSS 屬性選擇器來(lái)提高前端開(kāi)發(fā)效率！

閱讀 2276·2019-08-30 15:48
前端面試題-CSS優(yōu)先級(jí)

閱讀 1132·2019-08-30 14:09
HTML5中canvas實(shí)現(xiàn)小球擊打小方塊游戲

閱讀 518·2019-08-30 12:55
SASS詳解

閱讀 2739·2019-08-29 11:29
知曉推送正式上線！送你 13 億條模板消息

閱讀 1497·2019-08-26 13:43
JavaScript 是如何工作的：編寫自己的 Web 開(kāi)發(fā)框架 + React 及其虛擬 DOM

閱讀 2320·2019-08-26 13:30
HTML之常用標(biāo)簽

閱讀 2379·2019-08-26 12:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章