如何遍历本地文件夹，用jQuery UI Tabs动态创建带图片的标签页？

当然可以！手动编写880个<img>标签确实是个噩梦，用JavaScript动态生成完全能解决这个问题，我给你一套完整的实现方案，照着来就行：

前提说明 #

假设你的图片命名是有规律的（比如img-1.jpg、img-2.jpg……img-880.jpg），并且都存放在项目根目录下的images文件夹中。如果你的图片命名规则不同，只需要调整代码里的文件名生成逻辑即可。

步骤1：基础HTML结构 #

先搭建好页面的基础框架，别忘了引入jQuery、jQuery UI的库和样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片Tabs菜单</title>
    <!-- 引入jQuery UI样式 -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <!-- 引入jQuery UI -->
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <style>
        /* 自定义图片排列样式，可按需调整 */
        .tab-content img {
            width: 100px;
            height: auto;
            margin: 5px;
            object-fit: cover;
        }
        .ui-tabs-panel {
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- 用于存放生成的Tabs容器 -->
    <div id="image-tabs"></div>

    <script>
        // 后续动态生成逻辑写在这里
    </script>
</body>
</html>

步骤2：编写动态生成逻辑 #

在<script>标签里加入以下代码，它会自动计算标签页数量、生成标签页并填充图片：

$(document).ready(function() {
    const totalImages = 880; // 总图片数量
    const imagesPerTab = 54; // 每个标签页容纳的图片数
    const totalTabs = Math.ceil(totalImages / imagesPerTab); // 计算需要的标签页总数（向上取整）

    const tabsContainer = $('#image-tabs');
    let tabsTitleHtml = '<ul>'; // 标签页标题列表容器

    // 先批量生成所有标签页的标题和内容容器
    for (let i = 1; i <= totalTabs; i++) {
        tabsTitleHtml += `<li><a href="#tab-${i}">标签页 ${i}</a></li>`;
        tabsContainer.append(`<div id="tab-${i}" class="tab-content"></div>`);
    }
    tabsTitleHtml += '</ul>';
    tabsContainer.prepend(tabsTitleHtml);

    // 遍历所有图片，分配到对应标签页中
    for (let imgIndex = 1; imgIndex <= totalImages; imgIndex++) {
        // 计算当前图片所属的标签页编号
        const tabNumber = Math.ceil(imgIndex / imagesPerTab);
        // 生成图片DOM元素
        const imgElement = $(`<img src="images/img-${imgIndex}.jpg" alt="图片 ${imgIndex}">`);
        // 将图片追加到对应标签页的容器里
        $(`#tab-${tabNumber}`).append(imgElement);
    }

    // 初始化jQuery UI Tabs组件
    $('#image-tabs').tabs();
});

关键细节说明 #

• 图片命名适配：如果你的图片不是img-1.jpg这种格式，比如是photo_001.png，只需要修改img-${imgIndex}这部分，改成对应的命名规则即可。
• 本地运行注意：直接打开HTML文件可能会遇到浏览器的本地文件访问限制，建议用本地服务器运行（比如VS Code的Live Server插件、XAMPP等），这样能正常加载图片。
• 样式自定义：你可以修改CSS里的.tab-content img样式，调整图片大小、间距等，完全适配你期望的标签页样式。

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