Javascript 单击时显示/隐藏Div（多个Div）

情景：

我有一张美国的州地图。在州地图的上方，我制作了一张区域地图，使每个州成为一个可点击的链接。在每个州，我都有一个带有绝对位置和CSS样式的

，使

看起来像一个标注或工具提示框——包含关于每个特定州总部地址和网站的信息

因此，是的，我有50个不同的绝对定位的

s，它们当前设置为“可见性：隐藏”

我正在努力实现的目标：

当您单击区域地图中的特定链接时，该美国州的

将显示在相应位置。此外，当您单击完全相同的状态时，

将隐藏，或者当您单击不同的状态时，所有的

将隐藏，新状态的相应

将显示

我更喜欢用简单的Javascript（而不是Jquery）实现这一点，因为最终页面将加载到带有Drupal CMS的网站中

---

请帮忙。我不希望将每个状态编码为一个按钮，并编写50段不同的javascript代码。

因此，您需要解决三个主要问题：

列举所有链接

将onclick事件处理程序附加到这些链接

将链接映射到div

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

接下来，将onclick处理程序附加到每个链接。您可以通过指定element.onclick属性来实现这一点。这是编写在jQuery中大量使用的“不引人注目的javascript”的关键部分

最后，您需要一种将链接映射到div的方法。最简单的方法是使用链接“id”构建目标div的id。因此，例如，如果链接的id是“io”（对于爱荷华州），那么您将通过简单地将“s_”前置到链接的id来切换id为“s_io”的div的可见性。或者，您可以使用哈希映射或HTML5自定义数据属性来存储目标div的id，也可以使用str.replace或str.substring

---

您可以在这里看到这一点。

我会稍微更改您的设计，并使用一个

div

来显示状态信息。以另一种方式存储状态信息（我在示例中使用了

dataset-

值，并将状态名称用作

类

），并将其动态加载到您的info

div

。这使得在单击相同的状态时更容易显示/隐藏，并且标记更少。另外，使用

display:none

隐藏状态信息

div

，以便将其从布局中删除

演示：

脚本：

var areas=document.getElementsByTagName（'area'）；
对于（var index=0；index-1；
};

HTML:

CSS:

#地图{
高度：245px；
宽度：180px；
}
#地图视图{
位置：相对位置；
}
#信息{
背景色：白色；
显示：无；
位置：绝对位置；
z指数：1；
}
加利福尼亚州{
左：50px；
顶部：25px；
}
俄勒冈州{
左：150px；
顶部：125px；
}

为什么没有jQuery？Drupal不是已经有jQuery了吗？你为什么不考虑用CSS呢？@lieyan对于我的Drupal，我正在使用修改过的javascript和jQuery配置文件来帮助解决我的一个模块的编程问题。这是一种变通方法，但它是有效的。@如果我使用纯javascript，我可以轻松地将其作为drupal节点的外部文件调用，而且它不会破坏我上面提到的模块变通方法。另外，当涉及到Jquery时。。。我有点差劲。而且我真的没有任何工作代码可以发布。我尝试过许多不同的场景，包括一次非常长的jQuery尝试（50个不同的函数，每个函数都列出了每个div的show或hide函数，因此大约有2600行长）。我喜欢整个想法。但是，我很难将您的示例应用到图像地图。您可以在中看到一个工作示例。也许你能看到我错过了什么。在这个示例中，只有两个州的图像映射（华盛顿州和俄勒冈州，左上角）@CCRaiff：看到了吗，它是基于我使用图像映射的第二个版本。@CCRaiff：您遗漏的是您没有更改javascript中链接/区域列表的id:

var links=document.getElementById（'oshastemap'）