yy日韩无码,富婆的诱惑,国产菊爆视频在线观看,国产精品无码AV高清波波AV,国产成人啪精品视频站午夜,已满十八岁免费观看电视剧十八岁,中文字幕av久久人妻蜜桃臀

如題：客戶提出這樣一個(gè)奇怪的需求。

自動(dòng)獲取網(wǎng)頁(yè)內(nèi)容中的h2標(biāo)簽并添加到側(cè)邊欄作為定位，然后點(diǎn)擊側(cè)邊欄的標(biāo)題，右邊的文章側(cè)定位到對(duì)應(yīng)的位置。

經(jīng)過(guò)多次修改測(cè)試后，以下方法非常簡(jiǎn)單就實(shí)現(xiàn)了這個(gè)功能。

要是在WP上，不得又是各種插件才能實(shí)現(xiàn)。

第一步：

給新聞詳情加上class類：例如我給詳情添加了new-pages來(lái)作為唯一標(biāo)識(shí)。

如：

<div class="content new-pages fs-14 fs-sm-16 lh-2 mb-3" >
              新聞詳情內(nèi)容
 </div>

然后在側(cè)邊欄添加：

 <div class="nav ">          
                <div id="outputnav" class="nav-left-menu mb-2"></div>
           </div>

用于接收輸出獲取到的H2標(biāo)題。

然后使用JS如下：

document.addEventListener("DOMContentLoaded", function () {
  const content = document.querySelector('.new-pages'); // 固定容器
  const tocContainer = document.getElementById('outputnav');

  if (!content || !tocContainer) return;

  // 遞歸查找 .new-pages 中的所有 h2（不管嵌套在哪個(gè) div 中）
  const headings = content.querySelectorAll('h2');

  headings.forEach((heading, index) => {
    const anchorId = 'page' + (index + 1);

    // 避免重復(fù)添加錨點(diǎn)
    if (document.getElementById(anchorId)) return;

    // 創(chuàng)建錨點(diǎn)偏移
    const offsetDiv = document.createElement('div');
    offsetDiv.className = 'anchor-offset';
    offsetDiv.id = anchorId;
    heading.parentNode.insertBefore(offsetDiv, heading); // 插入到 h2 前面

    // 創(chuàng)建目錄鏈接
    const link = document.createElement('a');
    link.href = '#' + anchorId;
    link.className = 'toc-link';
    link.innerHTML = `
      <div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div>
      <div class="name">${heading.textContent.trim()}</div>
    `;

    tocContainer.appendChild(link);
  });
});

JS的作用就是：

1：遞歸查找H2標(biāo)簽，并獲取到他的標(biāo)題，存入到：outputnav中，

2：添加A標(biāo)簽，鏈接為：#page1, #page2,#page3等，同時(shí)添加：toc-link

最終形成：

<div class="nav ">          
                <div id="outputnav" class="nav-left-menu mb-2">
                <a href="#page1" class="toc-link"><div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div><div class="name">標(biāo)題1</div></a>
                <a href="#page2" class="toc-link"><div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div><div class="name">標(biāo)題2</div></a>
                <a href="#page3" class="toc-link"><div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div><div class="name">標(biāo)題3</div></a>
              </div>             
  </div>

3：給文章中添加偏移錨點(diǎn)：

<div class="anchor-offset" id="pageID號(hào)"></div>

最后稍微寫一下樣式就可以了。

.anchor-offset {
    display: block;
    position: relative;
    top: -80px;
    height: 0;
    visibility: hidden;
}
.nav-left-menu .toc-link{
   display: flex;
   margin-bottom: 15px;
    font-size: 16px;
}

.nav-left-menu .toc-link .i{
  width:20px;
}

.nav-left-menu .toc-link .i i{
   transform: scale(1.5);
}

.nav-left-menu .toc-link .name{
   width:calc(100% - 20px);
}

然后我們需要給左邊的導(dǎo)航添加點(diǎn)擊高亮和下滑到對(duì)應(yīng)的PAGE時(shí)也高亮。

有時(shí)候左邊點(diǎn)擊添加高亮?xí)В热缯f(shuō)明明已經(jīng)點(diǎn)了倒數(shù)第二個(gè)toc-link，但是還是最后一個(gè)是高亮狀態(tài)

• 頁(yè)面加載時(shí)： 計(jì)算頁(yè)面每個(gè)部分的位置，并生成目錄鏈接。

• 點(diǎn)擊目錄項(xiàng)： 平滑滾動(dòng)到對(duì)應(yīng)部分，并高亮顯示當(dāng)前目錄項(xiàng)。

• 滾動(dòng)時(shí)： 根據(jù)當(dāng)前滾動(dòng)位置高亮顯示對(duì)應(yīng)的目錄項(xiàng)。

核心：給點(diǎn)擊事件加上獨(dú)立的 active 狀態(tài)控制，并臨時(shí)禁用 scroll 判斷。

$(document).ready(function() {
    const tocLinks = $('.toc-link');
    let pageSections = [];
    let isClickScrolling = false;

    // 初始化收集 offsetTop
    function updatePageSections() {
        pageSections = [];
        tocLinks.each(function() {
            var targetId = $(this).attr('href').substring(1);
            var target = $('#' + targetId);
            if (target.length) {
                pageSections.push({
                    id: targetId,
                    top: target.offset().top
                });
            }
        });
    }

    updatePageSections();

    // 監(jiān)聽窗口大小變化重新計(jì)算
    $(window).on('resize', updatePageSections);

    // 點(diǎn)擊 toc-link 時(shí)處理
    tocLinks.on('click', function(e) {
        e.preventDefault();
        const targetId = $(this).attr('href').substring(1);
        const target = $('#' + targetId);
        if (target.length) {
            isClickScrolling = true;

            $('html, body').stop().animate({
                scrollTop: target.offset().top - 100
            }, 400, function() {
                isClickScrolling = false;
            });

            tocLinks.removeClass('active');
            $(this).addClass('active');
        }
    });

    // 滾動(dòng)監(jiān)聽
    $(window).on('scroll', function() {
        if (isClickScrolling) return;

        const scrollTop = $(window).scrollTop();
        let currentId = null;

        for (let i = 0; i < pageSections.length; i++) {
            if (scrollTop >= pageSections[i].top - 150) {
                currentId = pageSections[i].id;
            } else {
                break;
            }
        }

        if (currentId) {
            tocLinks.removeClass('active');
            $('.toc-link[href="#' + currentId + '"]').addClass('active');
        }
    });
});

修改后暫時(shí)沒(méi)有發(fā)現(xiàn)問(wèn)題。