如何在多DIV页面中实现多菜单对应多DIV的外部HTML加载？

嘿，我懂你现在的需求啦——从单个DIV加载外部HTML，升级到主菜单渲染子菜单到3个不同DIV，再让子菜单把外部HTML加载到各自关联的容器，对吧？咱们结合你已有的基础，一步步来实现这个场景：

第一步：先搭好DOM结构 #

首先咱们得把主菜单、子菜单容器、内容容器的结构理清楚，用data-*属性来关联各个层级的关系，这样代码会更灵活：

<!-- 主菜单 -->
<button class="main-menu-btn" data-submenu-url="submenu-a.html" data-submenu-target="submenu-container-a">子菜单A</button>
<button class="main-menu-btn" data-submenu-url="submenu-b.html" data-submenu-target="submenu-container-b">子菜单B</button>
<button class="main-menu-btn" data-submenu-url="submenu-c.html" data-submenu-target="submenu-container-c">子菜单C</button>

<!-- 子菜单容器（3个） -->
<div id="submenu-container-a" class="submenu-container"></div>
<div id="submenu-container-b" class="submenu-container"></div>
<div id="submenu-container-c" class="submenu-container"></div>

<!-- 内容容器（对应每个子菜单的内容加载目标） -->
<div id="content-a" class="content-container"></div>
<div id="content-b" class="content-container"></div>
<div id="content-c" class="content-container"></div>

第二步：编写jQuery逻辑 #

这里要注意两个关键点：

1. 主菜单点击后，把子菜单HTML加载到对应的子菜单容器
2. 子菜单是动态加载的，所以不能直接给子菜单按钮绑定点击事件，得用事件委托来处理

$(function() {
    // 1. 处理主菜单点击：加载子菜单到对应容器
    $(".main-menu-btn").click(function() {
        const submenuUrl = $(this).data("submenu-url");
        const submenuTarget = "#" + $(this).data("submenu-target");
        // 加载子菜单HTML到目标容器
        $(submenuTarget).load(submenuUrl);
    });

    // 2. 处理子菜单点击：加载内容到对应关联容器（事件委托）
    $(document).on("click", ".submenu-item", function() {
        const contentUrl = $(this).data("content-url");
        const contentTarget = "#" + $(this).data("content-target");
        // 加载内容HTML到目标容器
        $(contentTarget).load(contentUrl);
    });
});

第三步：子菜单HTML示例（比如submenu-a.html） #

子菜单里的每个项也要用data-*属性绑定对应的内容URL和目标容器：

<button class="submenu-item" data-content-url="content-a-1.html" data-content-target="content-a">内容A-1</button>
<button class="submenu-item" data-content-url="content-a-2.html" data-content-target="content-a">内容A-2</button>

关键细节说明 #

• 事件委托的必要性：因为子菜单是通过load()动态加载到页面的，直接绑定$(".submenu-item").click()会失效，所以咱们把事件绑定到document（或者更接近的父容器，比如.submenu-container），这样新添加的子菜单按钮也能触发点击事件。
• data-*属性的优势：不用把URL和目标容器写死在JS里，只要HTML里的data属性对应好，JS就能自动关联，后期维护起来更方便。

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