如何用JavaScript实现页面无刷新跳转？附导航栏代码

当然可以实现，核心思路是通过History API修改浏览器地址栏，同时用fetch加载目标页面的内容替换当前页面的指定区域，全程不刷新整个页面。下面结合你的导航栏代码一步步实现：

第一步：修改导航栏的点击事件 #

先把你原来的home()、work()这些单独函数改成统一的跳转逻辑，同时阻止<a>标签的默认刷新行为：

<div id="app">
    <nav id="nav">
        <div>
            <a class="nav-a on" onclick="navigate(event, '/')" href="/">HOME</a>
        </div>
        <div>
            <a class="nav-a" onclick="navigate(event, '/work.html')" href="/work.html">WORK</a>
        </div>
        <div>
            <img class="logo" src="Other Files/SVG/LogoName(White).svg" alt="LOGO">
        </div>
        <div>
            <a class="nav-a" onclick="navigate(event, '/about.html')" href="/about.html">ABOUT</a>
        </div>
        <div>
            <a class="nav-a" onclick="navigate(event, '/contact.html')" href="/contact.html">CONTACT</a>
        </div>
    </nav>
    <!-- 新增内容容器，用来加载新页面的主体内容 -->
    <div id="content-container"></div>
</div>

第二步：编写核心跳转函数 #

在页面底部添加<script>标签，实现无刷新跳转的核心逻辑：

// 获取内容容器和所有导航链接
const contentContainer = document.getElementById('content-container');
const navLinks = document.querySelectorAll('.nav-a');

function navigate(event, targetUrl) {
    // 阻止<a>标签默认的刷新跳转行为
    event.preventDefault();

    // 1. 异步加载目标页面的HTML内容
    fetch(targetUrl)
        .then(response => {
            if (!response.ok) throw new Error('页面加载失败');
            return response.text();
        })
        .then(pageHtml => {
            // 替换内容容器的HTML（实际开发中可只提取目标页面的主体部分，比如<main>标签内容）
            contentContainer.innerHTML = pageHtml;
            // 2. 更新浏览器地址栏，同时添加历史记录
            history.pushState({ path: targetUrl }, '', targetUrl);
            // 3. 更新导航栏的激活状态
            navLinks.forEach(link => link.classList.remove('on'));
            event.target.classList.add('on');
        })
        .catch(err => console.error(err));
}

// 监听浏览器前进/后退按钮，同步加载对应页面内容
window.addEventListener('popstate', (event) => {
    if (event.state?.path) {
        const mockEvent = { preventDefault: () => {} };
        navigate(mockEvent, event.state.path);
    }
});

// 页面初始化时加载首页内容（如果首页内容不在content-container中）
window.onload = () => {
    const currentPath = window.location.pathname;
    if (currentPath === '/' || currentPath === '') {
        fetch('/')
            .then(res => res.text())
            .then(html => contentContainer.innerHTML = html);
    }
};

关键逻辑说明 #

• event.preventDefault()：必须添加，否则<a>标签默认的刷新跳转会覆盖你的无刷新逻辑。
• fetch()：替代传统的XMLHttpRequest，用来异步获取目标页面的HTML内容，语法更简洁。
• history.pushState()：修改浏览器地址栏的URL，同时将当前状态存入历史记录栈，保证前进/后退按钮正常工作。
• popstate事件：监听浏览器的前进后退操作，触发时重新加载对应页面的内容。

注意事项 #

1. 本地测试需启动服务器：直接用file://协议打开本地HTML文件会触发CORS限制，导致fetch失败，推荐用VS Code的Live Server插件或Node.js的http-server启动本地服务。
2. 内容提取优化：示例中是把整个页面的HTML塞进容器，实际开发建议只提取目标页面的主体内容（比如每个页面的<main>标签），避免重复加载导航栏等公共部分。
3. SEO问题：这种无刷新跳转属于简化版SPA，搜索引擎抓取JS加载的内容可能存在困难，若需SEO支持，建议配合服务器端渲染（SSR）或静态站点生成（SSG）方案。

内容的提问来源于stack exchange，提问作者Mewt Mewt