如何用JavaScript实现HTML图片点击切换对应行星表格的显示/隐藏

嘿，刚入门编程不用慌，Stack Overflow就是帮大家解决这类问题的地方😉。我给你整理了一个简单易懂的实现方案，一步步来就能搞定点击图片显示对应行星表格的需求：

核心思路是：给每个行星图片绑定点击事件，点击时把对应行星的表格内容动态替换到你预留的显示区域里。下面是具体的代码实现步骤：

1. 先搭建基础HTML结构 #

首先你需要把行星图片和预留的表格显示区域写好，给每个图片加个标识（比如data-planet属性），方便后续识别是哪个行星：

<!-- 行星图片区域 -->
<div class="planet-images">
  <img src="mercury.jpg" alt="水星" data-planet="mercury" class="planet-img">
  <img src="venus.jpg" alt="金星" data-planet="venus" class="planet-img">
  <img src="earth.jpg" alt="地球" data-planet="earth" class="planet-img">
  <!-- 其他行星图片照这个格式加就行 -->
</div>

<!-- 你预留的表格显示位置 -->
<div id="planet-info-container">
  <!-- 这里会动态生成行星表格 -->
</div>

2. 存储行星的表格数据 #

用JavaScript对象把每个行星的表格内容存起来，这样点击图片时可以直接调用：

// 存储每个行星的表格HTML内容
const planetData = {
  mercury: `
    <table border="1" cellpadding="8" cellspacing="0">
      <tr><th>属性</th><th>值</th></tr>
      <tr><td>行星名称</td><td>水星</td></tr>
      <tr><td>直径</td><td>4879 km</td></tr>
      <tr><td>距离太阳</td><td>5791万 km</td></tr>
      <tr><td>公转周期</td><td>88地球日</td></tr>
    </table>
  `,
  venus: `
    <table border="1" cellpadding="8" cellspacing="0">
      <tr><th>属性</th><th>值</th></tr>
      <tr><td>行星名称</td><td>金星</td></tr>
      <tr><td>直径</td><td>12104 km</td></tr>
      <tr><td>距离太阳</td><td>1.082亿 km</td></tr>
      <tr><td>公转周期</td><td>225地球日</td></tr>
    </table>
  `,
  earth: `
    <table border="1" cellpadding="8" cellspacing="0">
      <tr><th>属性</th><th>值</th></tr>
      <tr><td>行星名称</td><td>地球</td></tr>
      <tr><td>直径</td><td>12742 km</td></tr>
      <tr><td>距离太阳</td><td>1.496亿 km</td></tr>
      <tr><td>公转周期</td><td>365地球日</td></tr>
    </table>
  `
  // 其他行星的表格内容照这个格式添加
};

3. 绑定点击事件，实现表格切换 #

用JavaScript给每个图片添加点击事件，点击时根据图片的data-planet属性找到对应表格，替换到显示区域：

// 获取所有行星图片元素
const planetImgs = document.querySelectorAll('.planet-img');
// 获取预留的表格显示容器
const infoContainer = document.getElementById('planet-info-container');

// 给每个图片绑定点击事件
planetImgs.forEach(img => {
  img.addEventListener('click', () => {
    // 获取当前点击的行星标识
    const planetKey = img.dataset.planet;
    // 取出对应行星的表格HTML
    const tableHtml = planetData[planetKey];
    // 把表格插入到显示容器里（替换原有内容）
    infoContainer.innerHTML = tableHtml;
  });
});

额外：实现“弹出”模态框效果 #

如果你想要点击图片后弹出一个窗口显示表格（而不是直接在页面里显示），可以加个简单的模态框：

先加模态框HTML： #

<!-- 模态框 -->
<div id="planet-modal" class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <div id="modal-table-container"></div>
  </div>
</div>

加模态框的CSS样式： #

/* 模态框基础样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 半透明背景 */
}

/* 模态框内容区 */
.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 70%;
  max-width: 500px;
}

/* 关闭按钮 */
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  color: black;
}

修改JavaScript点击事件为显示模态框： #

const modal = document.getElementById('planet-modal');
const modalTableContainer = document.getElementById('modal-table-container');
const closeBtn = document.querySelector('.close-btn');

// 点击图片显示模态框和对应表格
planetImgs.forEach(img => {
  img.addEventListener('click', () => {
    const planetKey = img.dataset.planet;
    modalTableContainer.innerHTML = planetData[planetKey];
    modal.style.display = "block";
  });
});

// 关闭模态框的逻辑
closeBtn.addEventListener('click', () => {
  modal.style.display = "none";
});

// 点击模态框外部关闭
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = "none";
  }
});

这样就能实现你想要的点击图片弹出对应行星表格的效果啦，每个步骤的代码都可以直接复制使用，后续添加新行星只需要在planetData里加对应的表格内容，再添一张带data-planet属性的图片就行~

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