当前位置：首页 > JavaScript

实现目录js

2026-02-01 01:06:33JavaScript

实现目录功能的方法

使用JavaScript动态生成目录可以通过以下方式实现：

获取标题元素 遍历文档中的标题元素（如h1、h2、h3等），收集它们的文本内容和层级信息。

创建目录结构 根据标题的层级构建嵌套的列表结构，通常使用ul和li元素来组织目录项。

添加锚点链接 为每个目录项创建链接，点击时平滑滚动到对应的标题位置。可以使用元素的id属性作为锚点目标。

实现目录js

样式美化 通过CSS为目录添加适当的样式，使其更美观易用，如缩进不同层级的标题、添加悬停效果等。

固定定位 将目录固定在页面一侧，方便用户随时访问。通过CSS的position: fixed属性实现。

实现目录js

示例代码

// 获取所有标题元素
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
const tocContainer = document.getElementById('toc');

// 创建目录结构
const tocList = document.createElement('ul');
let currentLevel = 1;

headings.forEach((heading, index) => {
  const level = parseInt(heading.tagName.substring(1));

  // 添加id如果没有
  if (!heading.id) {
    heading.id = `heading-${index}`;
  }

  // 创建目录项
  const tocItem = document.createElement('li');
  const tocLink = document.createElement('a');
  tocLink.href = `#${heading.id}`;
  tocLink.textContent = heading.textContent;
  tocLink.addEventListener('click', (e) => {
    e.preventDefault();
    heading.scrollIntoView({ behavior: 'smooth' });
  });

  tocItem.appendChild(tocLink);

  // 处理层级
  if (level > currentLevel) {
    const lastItem = tocList.lastChild;
    const newList = document.createElement('ul');
    lastItem.appendChild(newList);
    newList.appendChild(tocItem);
  } else if (level < currentLevel) {
    tocList.appendChild(tocItem);
  } else {
    tocList.appendChild(tocItem);
  }

  currentLevel = level;
});

tocContainer.appendChild(tocList);

样式示例

#toc {
  position: fixed;
  right: 20px;
  top: 20px;
  background: white;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  max-width: 250px;
  max-height: 80vh;
  overflow-y: auto;
}

#toc ul {
  list-style: none;
  padding-left: 15px;
}

#toc li {
  margin: 5px 0;
}

#toc a {
  text-decoration: none;
  color: #333;
}

#toc a:hover {
  color: #0066cc;
}