当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 18:46:12 HTML5

背景初版https://www.ouorz.com/366修改意见鉴于单个H标签设置繁琐纠结,且有主题用户反馈,干脆改为可分级代码。varcount_ti=count_in=count_ar=count_sc=count_hr=count_e=1;varoffset=newArray;$('.article-contenth3').each(function(){//每个获取h3内容$('#article-index').html($('#article-index').html()+''+$(this).eq(0).html()+'');$(this).eq(0).attr('id','in'+(count_in++));//h3addidoffset[0]=0;offset[count_ar++]=$(this).eq(0).offset().top;//h3位置存入数组count_e++});if(count_e!==1){//如果有h3标签$(window).scroll(function(){//滑动窗口时varscroH=$(this).scrollTop()+130;varnavH=offset[count_sc];//从1位置获取当前h3varnavH_prev=offset[count_sc-1];//获取前一个h3位置(用于向后滑动)if(scroH>=navH){//滑过当前h3位置$('#ti'+(count_sc-1)).attr('class','');$('#ti'+count_sc).attr('class','active');计数sc++;//移动到下一个h3位置}if(scroH<=navH_prev){//滑回上一个h3位置,调整到上一个h3位置$('#ti'+(count_sc-2)).attr('类','活跃');count_sc--;$('#ti'+count_sc).attr('类','');}});}else{$('.index-div').css('display','none')}↑JavaScript代码注释$(“:header”)可以获取header标签(Hx)prop(“tagName").replace('H',")可以到标签层