嗨，这个问题挺常见的，咱们马上来搞定它！你的当前代码只处理了被点击按钮对应的单个视频，完全没管页面上其他的视频元素，所以才会出现多个视频同时播放、显示的情况。

核心思路很简单：每次点击按钮时，先把所有视频都统一隐藏并暂停，再单独处理当前要显示的那个视频。这样就能保证同一时间只有一个视频处于显示状态。

修改后的JavaScript代码 #

先给你直接能用的修改版，注释都写清楚了：

function display(id) {
  // 1. 获取页面上所有的<video>元素，先统一隐藏并暂停
  const allVideos = document.querySelectorAll('video');
  allVideos.forEach(video => {
    video.style.display = 'none';
    video.pause(); // 必须暂停，不然视频会在后台继续播放
  });

  // 2. 处理当前点击的视频
  const currentVid = document.getElementById(id);
  // 先记录当前视频原来的显示状态（避免统一隐藏后判断失效）
  const wasPreviouslyDisplayed = currentVid.style.display === 'block';

  // 如果原来没显示，现在就显示它；如果原来显示，就保持隐藏（实现点击同一按钮关闭的功能）
  if (!wasPreviouslyDisplayed) {
    currentVid.style.display = 'block';
  }
}

更规范的优化方案（推荐） #

如果你的视频都有统一的类名（比如class="video-player"），或者想把样式和逻辑分离，建议用CSS类来控制显示/隐藏，这样代码更易维护：

先加CSS样式：

/* 默认隐藏所有视频 */
.video-player {
  display: none;
}
/* 显示视频的类 */
.video-player.active {
  display: block;
}

再修改JavaScript：

function display(id) {
  // 1. 先把所有视频的active类移除，统一隐藏并暂停
  const allVideos = document.querySelectorAll('.video-player');
  allVideos.forEach(video => {
    video.classList.remove('active');
    video.pause();
  });

  // 2. 处理当前视频
  const currentVid = document.getElementById(id);
  const wasActive = currentVid.classList.contains('active');

  if (!wasActive) {
    currentVid.classList.add('active');
  }
}

为什么这么做？ #

• document.querySelectorAll('video')（或.video-player）会抓取页面上所有目标视频，确保没有遗漏
• 统一调用pause()是关键，不然即使视频隐藏了，声音可能还在后台播放，影响体验
• 先记录当前视频的状态再统一操作，避免因为统一隐藏导致判断错误

你可以直接把代码替换进去测试，点击不同按钮时，之前的视频会自动关闭隐藏，同一按钮也能正常切换显示/隐藏状态。

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