js怎么做导航目录

JavaScript 制作导航目录的方法包括：使用DOM操作、添加事件监听器、动态生成目录。下面将详细介绍如何使用JavaScript实现这些功能。

一、引入基础HTML结构

要创建导航目录，首先需要一个HTML文档结构，其中包括主要内容和一个空的导航容器。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document with TOC</title>
    <style>
        /* 简单的样式使导航栏固定在页面左侧 */
        #toc {
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            overflow-y: auto;
            background-color: #f4f4f4;
            padding: 20px;
        }
        #content {
            margin-left: 220px;
            padding: 20px;
        }
        .toc-item {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div id="toc"></div>
    <div id="content">
        <h1>Section 1</h1>
        <p>Some content here...</p>
        <h2>Subsection 1.1</h2>
        <p>Some content here...</p>
        <h2>Subsection 1.2</h2>
        <p>Some content here...</p>
        <h1>Section 2</h1>
        <p>Some content here...</p>
        <h2>Subsection 2.1</h2>
        <p>Some content here...</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、使用JavaScript生成导航目录

接下来，我们使用JavaScript来生成导航目录。以下是详细步骤：

1、选择目标元素并提取信息

首先，需要选择内容区域中的所有标题元素。可以使用querySelectorAll方法选择所有h1到h6元素：

document.addEventListener('DOMContentLoaded', function () {
    const tocContainer = document.getElementById('toc');
    const content = document.getElementById('content');
    const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
});

2、生成导航项并插入DOM

然后，遍历这些标题元素，生成相应的导航项，并将其插入到导航容器中：

document.addEventListener('DOMContentLoaded', function () {
    const tocContainer = document.getElementById('toc');
    const content = document.getElementById('content');
    const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
    headings.forEach((heading, index) => {
        const tocItem = document.createElement('div');
        tocItem.className = 'toc-item toc-' + heading.tagName.toLowerCase();
        tocItem.innerText = heading.innerText;
        tocItem.setAttribute('data-target', heading.id || 'heading-' + index);
        if (!heading.id) {
            heading.id = 'heading-' + index;
        }
        tocContainer.appendChild(tocItem);
    });
});

3、添加滚动事件

为了实现点击导航项后页面自动滚动到相应部分的效果，需要为导航项添加点击事件监听器：

document.addEventListener('DOMContentLoaded', function () {
    const tocContainer = document.getElementById('toc');
    const content = document.getElementById('content');
    const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
    headings.forEach((heading, index) => {
        const tocItem = document.createElement('div');
        tocItem.className = 'toc-item toc-' + heading.tagName.toLowerCase();
        tocItem.innerText = heading.innerText;
        tocItem.setAttribute('data-target', heading.id || 'heading-' + index);
        if (!heading.id) {
            heading.id = 'heading-' + index;
        }
        tocItem.addEventListener('click', function () {
            document.getElementById(tocItem.getAttribute('data-target')).scrollIntoView({ behavior: 'smooth' });
        });
        tocContainer.appendChild(tocItem);
    });
});

三、优化导航目录

为提升用户体验，可以对导航目录进行进一步优化：

1、突出显示当前章节

当用户滚动页面时，可以突出显示当前章节对应的导航项。实现这一功能需要监听页面的滚动事件，并根据滚动位置更新导航项的样式：

document.addEventListener('DOMContentLoaded', function () {
    const tocContainer = document.getElementById('toc');
    const content = document.getElementById('content');
    const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
    const tocItems = [];
    headings.forEach((heading, index) => {
        const tocItem = document.createElement('div');
        tocItem.className = 'toc-item toc-' + heading.tagName.toLowerCase();
        tocItem.innerText = heading.innerText;
        tocItem.setAttribute('data-target', heading.id || 'heading-' + index);
        if (!heading.id) {
            heading.id = 'heading-' + index;
        }
        tocItem.addEventListener('click', function () {
            document.getElementById(tocItem.getAttribute('data-target')).scrollIntoView({ behavior: 'smooth' });
        });
        tocContainer.appendChild(tocItem);
        tocItems.push(tocItem);
    });
    window.addEventListener('scroll', function () {
        let currentHeading = null;
        headings.forEach(heading => {
            if (heading.getBoundingClientRect().top <= 0) {
                currentHeading = heading;
            }
        });
        tocItems.forEach(tocItem => {
            tocItem.classList.remove('active');
        });
        if (currentHeading) {
            const currentTocItem = tocItems.find(item => item.getAttribute('data-target') === currentHeading.id);
            if (currentTocItem) {
                currentTocItem.classList.add('active');
            }
        }
    });
});

2、样式优化

可以通过CSS进一步优化导航目录的样式，使其更加美观：

.toc-item {
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}
.toc-item:hover,
.toc-item.active {
    background-color: #007bff;
    color: #fff;
}

四、总结

通过以上步骤，我们已经成功使用JavaScript实现了一个动态生成的导航目录，并实现了点击导航项滚动到相应章节、突出显示当前章节等功能。这种方法不仅提升了用户体验，还使得页面内容更加结构化和易于导航。为了进一步提升项目管理效率，可以结合 研发项目管理系统PingCode 和 通用项目协作软件Worktile 进行综合管理。这两个工具分别在研发项目管理和通用协作方面提供了强大的功能支持。