点击菜单项时替换HTML元素内容的实现方案咨询

步骤1：拆分重复代码与内容文件 #

• 把顶部/侧边菜单单独存为 menu.php，所有页面共用这一份
• 每个部门的内容单独存为独立文件，比如 dept_warehouse.php（仓库部门）、dept_production.php（生产部门）等，文件里只写<main>需要的内容（不需要重复菜单、html/head/body标签）

步骤2：改造主页面为 index.php #

把原来的index.html改名为index.php，替换内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 你的原有head内容：样式、meta标签等 -->
    <title>设备手册导航</title>
</head>
<body>
    <!-- 引入共用菜单 -->
    <?php include 'menu.php'; ?>

    <!-- 内容容器 -->
    <main>
        <?php
        // 获取当前选中的部门，默认加载第一个部门
        $dept = $_GET['dept'] ?? 'warehouse';
        // 安全校验：只允许指定的部门文件，防止路径遍历
        $allowed_depts = ['warehouse', 'production', 'quality', 'maintenance'];
        if (in_array($dept, $allowed_depts)) {
            include "dept_{$dept}.php";
        } else {
            // 非法参数时显示默认内容
            include 'dept_warehouse.php';
        }
        ?>
    </main>

    <!-- 原有其他底部内容 -->
</body>
</html>

步骤3：编写共用菜单 menu.php #

菜单链接指向带参数的index.php，示例：

<!-- 顶部下拉菜单示例 -->
<select onchange="location.href=this.value">
    <option value="index.php?dept=warehouse">仓库部门</option>
    <option value="index.php?dept=production">生产部门</option>
    <option value="index.php?dept=quality">质检部门</option>
    <option value="index.php?dept=maintenance">维修部门</option>
</select>

<!-- 侧边菜单示例 -->
<ul class="sidebar-menu">
    <li><a href="index.php?dept=warehouse">仓库设备手册</a></li>
    <li><a href="index.php?dept=production">生产设备蓝图</a></li>
    <li><a href="index.php?dept=quality">质检工具文档</a></li>
    <li><a href="index.php?dept=maintenance">维修手册汇总</a></li>
</ul>

步骤4：编写部门内容文件（示例 dept_warehouse.php） #

只写<main>需要的内容，比如：

<h2>仓库部门设备手册</h2>
<ul>
    <li><a href="docs/warehouse_scanner.pdf">斑马扫描器操作手册</a></li>
    <li><a href="blueprints/warehouse_rack.pdf">货架布局蓝图</a></li>
</ul>

如果旧设备浏览器支持基础JS，也可以用这个方案，不需要PHP环境：

步骤1：修改原有index.html的菜单 #

给菜单链接添加data-src属性，指定对应内容文件，阻止默认跳转：

<!-- 侧边菜单示例 -->
<ul class="sidebar-menu">
    <li><a href="#" data-src="dept_warehouse.html">仓库设备手册</a></li>
    <li><a href="#" data-src="dept_production.html">生产设备蓝图</a></li>
    <li><a href="#" data-src="dept_quality.html">质检工具文档</a></li>
    <li><a href="#" data-src="dept_maintenance.html">维修手册汇总</a></li>
</ul>

<main id="content-container">
    <!-- 默认加载仓库内容 -->
</main>

步骤2：添加JS加载逻辑（放在body末尾） #

用兼容旧浏览器的XMLHttpRequest（比fetch更适配旧设备）：

// 获取内容容器和所有菜单链接
const contentContainer = document.getElementById('content-container');
const menuLinks = document.querySelectorAll('.sidebar-menu a');

// 加载内容函数
function loadContent(url) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            contentContainer.innerHTML = xhr.responseText;
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}

// 给菜单绑定点击事件
menuLinks.forEach(function(link) {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止跳转
        const src = this.getAttribute('data-src');
        loadContent(src);
    });
});

// 页面加载时默认加载第一个内容
window.onload = function() {
    loadContent('dept_warehouse.html');
};

步骤3：编写部门内容文件（示例 dept_warehouse.html） #

同样只写<main>需要的内容，和PHP方案里的部门文件一致。

适配旧安卓斑马扫描器的注意事项 #

1. 优先选PHP方案：服务器端渲染不需要依赖设备浏览器的JS支持，旧设备兼容性更好
2. 如果用JS方案，避免使用ES6+语法，全部用ES5标准写法
3. 确保所有文件路径都是相对路径，避免绝对路径导致加载失败
4. 测试时直接用扫描器自带的浏览器打开，验证菜单跳转和内容加载是否正常

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