中文字幕乱伦无码|久久丝袜综合视频|国产原创在线播放|www.欧美高清|伊人影院在线看|五月开心综合婷婷|久久人妻无码中文字幕|黄色视频新aaa|亚洲另类性视频|91视频久久综合

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

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

經(jīng)過多次修改測試后，以下方法非常簡單就實現(xiàn)了這個功能。

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

第一步：

給新聞詳情加上class類：例如我給詳情添加了new-pages來作為唯一標識。

如：

<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標題。

然后使用JS如下：

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

  if (!content || !tocContainer) return;

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

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

    // 避免重復添加錨點
    if (document.getElementById(anchorId)) return;

    // 創(chuàng)建錨點偏移
    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標簽，并獲取到他的標題，存入到：outputnav中，

2：添加A標簽，鏈接為：#page1, #page2,#page3等，同時添加：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">標題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">標題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">標題3</div></a>
              </div>             
  </div>

3：給文章中添加偏移錨點：

<div class="anchor-offset" id="pageID號"></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);
}