单击时显示/隐藏 Div(多个 Div) [英] Show/Hide Div On Click (numerous Divs)

问题描述

场景:

我有一张美国的州地图.在州地图之上，我制作了一个区域地图，使每个州成为一个可点击的链接.在每个状态上，我有一个

具有绝对位置和 CSS 样式，使

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

所以，是的，我有 50 个不同的

具有绝对定位，当前设置为visibility:hidden".

我想要实现的目标:

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

将出现在适当的位置.此外，当您单击完全相同的状态时

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

将隐藏，并且将出现新状态的正确

.

我更喜欢用简单的 Javascript(而不是 Jquery)来做这件事，因为最终页面将被加载到一个带有 Drupal CMS 的网站中.

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

解决方案

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

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

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

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

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

您可以在 jsfiddle、另一个使用图像映射的版本.

Scenario:

I have a state map of the USA. Over top of the state map, I have manufactured an area map to make each state a clickable link. Over each state, I have a <div> with absolute position and CSS styling to make the <div> look like a callout or tooltip box -- containing information about the address and website of the head office in each specific state.

So, yes, I have 50 different <div>s with absolute positioning that are currently set to "visibility:hidden".

What I am trying to accomplish:

When you click on a specific link from the area map, the <div> for that US state will appear in the appropriate location. Furthermore, when you click on the exact same state the <div> will hide, or when you click on a different state the all of the <div>s hide, and the proper <div> for the new state will appear.

I would prefer to do this in simple Javascript (not Jquery) as ultimately the page will be loaded in a website with a Drupal CMS.

Please help. I'd rather not code each state as a button and write fifty different segments of javascript code.

解决方案

So you have three main problems to solve:

1. enumerate all the links
2. attach the onclick event handlers to those links
3. map the links to the divs

You can enumerate the links with the .getElement* functions. Depending on the markup of your list, it might take a more walk around before you get the elements you want; jQuery would really help in simplifying the .getElement* functions.

Next, you attach onclick handler to each of those links. You can do this by assigning to the element.onclick attribute. This is the key part to writing "unobtrusive javascript", which are used heavily in jQuery.

Finally, you need a way to map the links to the divs. The simplest is to build the id of the target div using the links' id. So, for example, if a link's id is 'io' (for Iowa) then you will toggle the visibility of the div whose id is 's_io' by simply prepending 's_' to the link's id. Alternatively, you can use a hash map or HTML 5 custom data attribute to store the id of the target div or you can use str.replace or str.substring.

You can see this in action in this jsfiddle, another version using image map.

这篇关于单击时显示/隐藏 Div(多个 Div)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！