如何保留现有jQuery导航，实现URL直接加载指定内容到页面div？

要实现你需要的功能，得从服务器配置和前端脚本修改两部分入手，同时保留原有的无刷新导航交互：

第一步：服务器端配置（核心前提） #

直接访问www.mywebsite.com/band这类URL时，服务器默认会寻找根目录下的band.html文件或band文件夹，所以必须配置服务器将这类请求重定向到index.html，让前端脚本接管内容加载逻辑。

Apache服务器（使用.htaccess） #

在项目根目录创建.htaccess文件，添加以下规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Nginx服务器 #

在站点配置的location块中添加：

location / {
    try_files $uri $uri/ /index.html;
}

第二步：修改前端导航脚本 #

更新你的jQuery脚本，使其能解析当前URL路径、自动加载对应内容，同时点击导航时更新URL（保持无刷新体验）：

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
    // 默认加载的页面
    const defaultPage = '/home.html';

    // 解析当前URL路径，获取目标页面
    function getTargetPage() {
        const path = window.location.pathname;
        // 根路径返回默认页，其他路径拼接.html后缀
        return path === '/' ? defaultPage : `${path}.html`;
    }

    // 通用内容加载函数
    function loadContent(pageUrl) {
        $('#content').load(pageUrl, function(response, status) {
            // 加载失败时回退到默认页
            if (status === 'error') {
                $('#content').load(defaultPage);
            }
        });
    }

    // 页面初始化时自动加载对应内容
    loadContent(getTargetPage());

    // 导航点击事件处理
    $('#navigation a').click(function(e) {
        e.preventDefault();
        const url = $(this).attr('href');
        // 更新URL（不刷新页面）
        window.history.pushState({path: url}, '', url.replace('.html', ''));
        // 加载对应内容
        loadContent(url);
    });

    // 处理浏览器前进/后退按钮
    window.addEventListener('popstate', function(event) {
        const pageUrl = event.state?.path || defaultPage;
        loadContent(pageUrl);
    });
});
</script>

第三步：调整导航链接格式 #

确保导航栏的链接href与你想要的URL对应，示例：

<div id="navigation">
    <a href="/home">首页</a>
    <a href="/band">乐队</a>
    <a href="/gallery">画廊</a>
</div>

脚本会自动将/band这类路径转换为/band.html去加载对应文件。

完成以上配置后，用户访问www.mywebsite.com/band时，服务器会返回index.html，前端脚本解析路径后自动把band.html的内容加载到content容器中；点击导航时也会同步更新URL，完全保留原有的无刷新导航体验。

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