页面加载时如何调用菜单函数并指定加载目标容器？

嘿，这个需求其实挺常见的，我给你分享两种简单的实现方式，既能保留原来的菜单点击触发逻辑，又能让页面一加载就自动加载指定容器：

方法一：固定默认容器，页面加载直接调用函数 #

假设你的加载容器函数是类似这样的：

function loadContainer(containerId) {
  // 你的核心加载逻辑：比如隐藏所有容器，显示目标容器
  document.querySelectorAll('.container').forEach(container => {
    container.style.display = 'none';
  });
  document.getElementById(containerId).style.display = 'block';
}

你只需要在页面加载完成后，主动调用这个函数并传入你想要的默认容器参数就行。用原生JS的DOMContentLoaded事件就能确保DOM加载完成后再执行：

// 监听页面DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
  // 这里传入你想默认加载的容器，比如原来的默认是Container1，改成你需要的就行
  loadContainer('Container1');
});

如果你的脚本是放在<body>标签的末尾（也就是DOM已经加载完成的位置），甚至可以直接写：

// 直接调用，不用监听事件
loadContainer('Container1');

方法二：从URL参数动态获取目标容器（更灵活） #

如果想要更灵活的控制——比如用户可以通过链接（比如yourpage.html?container=Container3）直接打开指定容器，你可以从URL的查询参数里读取目标容器：

document.addEventListener('DOMContentLoaded', function() {
  // 解析URL参数
  const urlParams = new URLSearchParams(window.location.search);
  // 获取container参数，没有的话用默认值Container1
  const targetContainer = urlParams.get('container') || 'Container1';
  // 调用加载函数
  loadContainer(targetContainer);
});

这种方式的好处是，你可以给不同的容器生成不同的链接，用户打开链接就直接进入对应容器，非常方便。

保留原有的菜单点击逻辑 #

不管用哪种方法，原来的菜单点击触发逻辑完全不用改，比如菜单的点击事件还是这样写：

// 假设菜单选项的点击事件是绑定在按钮上
document.getElementById('menu-container1').addEventListener('click', function() {
  loadContainer('Container1');
});
document.getElementById('menu-container2').addEventListener('click', function() {
  loadContainer('Container2');
});

这样菜单点击和页面自动加载两种方式都能正常工作，互不影响～

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