javascript - 单击时显示/隐藏 Div(许多 Div)

Question

场景:

我有一张美国的州 map 。在州 map 之上，我制作了一个区域 map ，使每个州都成为可点击的链接。在每个州，我都有一个 <div>使用绝对位置和 CSS 样式制作 <div>看起来像一个标注或工具提示框 -- 包含有关每个特定州的总部地址和网站的信息。

所以，是的，我有 50 个不同的 <div>具有当前设置为“visibility:hidden”的绝对定位。

我想要完成的事情:

当您单击区域 map 中的特定链接时，<div>该美国州将出现在适当的位置。此外，当您单击完全相同的状态时 <div>将隐藏，或者当您单击不同状态时所有 <div> s hide, 和适当的 <div>因为新的状态将会出现。

我更愿意使用简单的 Javascript(而不是 Jquery)执行此操作，因为最终页面将加载到具有 Drupal CMS 的网站中。

请帮忙。我宁愿不将每个状态编码为一个按钮，而是编写 50 个不同的 javascript 代码段。

Answer 1

所以你要解决三个主要问题:

1. 枚举所有链接
2. 将 onclick 事件处理程序附加到这些链接
3. 将链接映射到 div

您可以使用 .getElement* 函数枚举链接。根据列表的标记，在获得所需元素之前可能需要多走几步； jQuery 确实有助于简化 .getElement* 函数。

接下来，您将 onclick 处理程序附加到每个链接。您可以通过分配给 element.onclick 属性来做到这一点。这是编写在 jQuery 中大量使用的“不显眼的 javascript”的关键部分。

最后，您需要一种将链接映射到 div 的方法。最简单的是使用链接的 ID 构建目标 div 的 ID。因此，例如，如果链接的 ID 是“io”(对于爱荷华州)，那么您只需在链接的 ID 前加上“s_”即可切换 ID 为“s_io”的 div 的可见性。或者，您可以使用 HashMap 或 HTML 5 自定义数据属性来存储目标 div 的 ID，或者您可以使用 str.replace 或 str.substring。

您可以在这个 jsfiddle 中看到实际效果, another version using image map .