国产沈阳熟女视频|骚视频97网站一区日本在线视频|久1社区在线视频|综合久久国外自产拍无码精品视频|亚洲欧美Tv先锋|综合五月天网址制服丝袜在线露脸|1024欧美手机视频我不卡|日本二区欧美亚洲国产|丁香五月婷婷五月|综合 另类 一区

如題：客戶提出這樣一個(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>

最后稍微寫(xiě)一下樣式就可以了。

.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);
}