Vanilla JS实现文件夹点击切换对应文件显示的问题求助

你的核心问题在于用remove()删除了DOM元素，一旦删除就无法恢复；同时当前逻辑只能处理单个文件，没法批量展示项目文件夹下的多个文件。下面是针对现有代码的修复方案：

步骤1：给文件添加文件夹关联标识 #

修改HTML中所有content-file元素，新增data-folder属性标记所属文件夹，方便后续批量匹配：

<td class="content-file" id="about-file" data-folder="about">
  <img id="notes-icon" src="message_file-0.png"> about.txt
</td>
<td class="content-file" id="project-file-1" data-folder="projects">
  <img id="notes-icon" src="message_file-0.png"> Project 1
</td>
<td class="content-file" id="project-file-2" data-folder="projects">
  <img id="notes-icon" src="message_file-0.png"> Project 2
</td>
<td class="content-file" id="project-file-3" data-folder="projects">
  <img id="notes-icon" src="message_file-0.png"> Project 3
</td>
<td class="content-file" id="contact-file" data-folder="contact">
  <img id="notes-icon" src="message_file-0.png"> contact.txt
</td>

步骤2：重写文件显示逻辑（替换原findFile等函数） #

删除原有的removeContent、addContent、findFile函数，替换为以下代码：

// 提前获取所有文件元素，避免重复查询DOM
const allContentFiles = document.querySelectorAll('.content-file');

// 根据文件夹名称显示对应文件，隐藏其他文件
function showFilesForFolder(folderName) {
  allContentFiles.forEach(file => {
    if (file.dataset.folder === folderName) {
      file.style.display = 'flex'; // 恢复显示，对应CSS中的flex布局
    } else {
      file.style.display = 'none'; // 隐藏非目标文件
    }
  });
}

// 绑定文件夹点击事件
openAboutTab.addEventListener('click', () => {
  showFilesForFolder('about');
});

openProjectsTab.addEventListener('click', () => {
  showFilesForFolder('projects');
});

openContactTab.addEventListener('click', () => {
  showFilesForFolder('contact');
});

// 可选：页面加载时默认显示about文件夹的文件
window.addEventListener('load', () => {
  showFilesForFolder('about');
});

方案说明 #

1. 保留DOM元素：用style.display控制显示/隐藏，元素始终存在于DOM中，切换文件夹时可以随时恢复显示，解决了“内容区变空无法恢复”的问题。
2. 批量匹配文件：通过data-folder属性建立文件与文件夹的关联，一次遍历即可完成所有文件的状态切换，完美支持多文件的文件夹（比如projects下的3个项目文件）。
3. 性能优化：提前获取所有文件元素，避免每次点击都重复查询DOM，提升响应速度。

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