如何用jQuery从CSS菜单批量加载本地HTML文件至div（无需逐个写链接）

核心思路 #

利用jQuery的循环批量生成菜单链接，结合load()方法加载本地笔记文件，无需手动编写上千个链接，完美适配你的离线运行场景。

第一步：整理文件结构 #

先把所有笔记文件统一放在一个文件夹（比如命名为notes），文件名尽量保持规律：

• 方式1：按序号命名，如note001.html、note002.html...note1000.html（补零保证文件名长度一致，方便循环）
• 方式2：按主题命名，如math-algebra.html、english-grammar.html...（需提前整理文件名列表）

第二步：基础HTML与Flexbox布局 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>班级笔记系统</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    /* Flexbox实现菜单+内容的分栏布局 */
    .note-system {
      display: flex;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    #note-menu {
      width: 280px;
      overflow-y: auto;
      border-right: 1px solid #ddd;
      padding: 15px;
      background-color: #f5f5f5;
    }
    #note-menu li {
      list-style: none;
      margin-bottom: 8px;
    }
    #note-menu a {
      text-decoration: none;
      color: #333;
      display: block;
      padding: 6px;
      border-radius: 4px;
    }
    #note-menu a:hover {
      background-color: #e0e0e0;
    }
    #note-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="note-system">
    <ul id="note-menu"></ul> <!-- 自动生成的菜单会插入这里 -->
    <div id="note-content"></div> <!-- 笔记内容加载区域 -->
  </div>

  <script>
    // jQuery代码写在这里，后面分情况说明
  </script>
</body>
</html>

第三步：jQuery批量生成菜单与加载内容 #

情况1：文件名按序号规律命名 #

如果是note001.html到note1000.html格式，用循环自动生成菜单：

$(document).ready(function() {
  // 批量生成1000个菜单链接
  for (let i = 1; i <= 1000; i++) {
    // 给序号补零，确保文件名和显示编号统一
    let noteNumber = i.toString().padStart(3, '0');
    let noteUrl = `notes/note${noteNumber}.html`;
    // 创建菜单元素并插入到菜单列表
    let menuItem = $(`<li><a href="#" data-url="${noteUrl}">笔记 ${noteNumber}</a></li>`);
    $('#note-menu').append(menuItem);
  }

  // 点击菜单加载对应笔记
  $('#note-menu').on('click', 'a', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    let targetUrl = $(this).data('url');
    $('#note-content').load(targetUrl); // 将笔记内容加载到指定区域
  });

  // 页面加载完成后默认打开第一个笔记
  $('#note-menu a:first').trigger('click');
});

情况2：文件名按主题命名 #

如果文件名无序号规律，先批量导出文件名列表：

1. 打开命令行，进入notes文件夹
   • Windows：执行dir /b *.html > filelist.txt
   • Mac/Linux：执行ls *.html > filelist.txt
2. 打开filelist.txt，把所有文件名复制到数组中，再生成菜单：

$(document).ready(function() {
  // 从filelist.txt复制所有文件名到这个数组
  const noteFiles = [
    'math-algebra.html',
    'english-grammar.html',
    'physics-mechanics.html',
    // ... 补充剩余文件名
  ];

  // 批量生成菜单
  noteFiles.forEach(function(fileName) {
    // 把文件名转成易读的菜单文字（去掉.html后缀，替换连字符为空格）
    let menuText = fileName.replace('.html', '').replace('-', ' ');
    let noteUrl = `notes/${fileName}`;
    let menuItem = $(`<li><a href="#" data-url="${noteUrl}">${menuText}</a></li>`);
    $('#note-menu').append(menuItem);
  });

  // 点击加载逻辑和默认打开第一个笔记（同情况1）
  $('#note-menu').on('click', 'a', function(e) {
    e.preventDefault();
    let targetUrl = $(this).data('url');
    $('#note-content').load(targetUrl);
  });

  $('#note-menu a:first').trigger('click');
});

离线运行注意事项 #

• 浏览器本地文件限制：Chrome等浏览器默认禁止本地文件的AJAX请求（load()属于AJAX），解决方法：
  • Chrome：右键快捷方式→属性→目标栏末尾添加 --allow-file-access-from-files（注意前面有空格），重启浏览器后打开你的HTML文件
• 更稳定的本地服务器方式：用Python启动简易本地服务器（无需联网）：
  1. 打开命令行，进入项目文件夹
  2. 执行python -m http.server（需安装Python3）
  3. 浏览器访问http://localhost:8000即可正常使用

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