开发者问题收集

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

2011-12-26
2139
javascript html onclick

场景：

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

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

我想要实现的目标：

当您单击区域地图上的特定链接时，该美国州的 <div> 将显示在适当的位置。此外，当您单击完全相同的状态时， <div> 将隐藏，或者当您单击不同的状态时，所有 <div> 都会隐藏，并且会出现新状态的正确 <div> 。

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

请帮忙。我宁愿不将每个状态编码为一个按钮并编写五十个不同的 javascript 代码段。

2个回答

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

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

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

接下来，将 onclick 处理程序附加到每个链接。您可以通过分配给 element.onclick 属性来执行此操作。这是编写“非侵入式 javascript”的关键部分，它在 jQuery 中被大量使用。

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

您可以在此 jsfiddle 、 使用图像映射的另一个版本 中看到此操作。

Lie Ryan
2011-12-26

我会稍微改变您的设计，并使用单个 div 来显示州信息。以另一种方式存储州信息（我在示例中使用了 dataset- 值，并使用州名称作为 class ），并将其动态加载到您的信息 div 中。这样，当单击同一州时，显示/隐藏会更加容易，标记也更少。另外，使用 display: none; 隐藏状态信息 div ，以便将其从布局中删除。

演示： http://jsfiddle.net/ThinkingStiff/WYLzY/

脚本： 

var areas = document.getElementsByTagName( 'area' );

for( var index = 0; index < areas.length; index++ ) {    

    areas[index].addEventListener( 'click', function ( event ) {

        var info = document.getElementById( 'info' ), display;

        if( info.hasClass( this.dataset.state ) ) {
            display = info.style.display == 'none' ? 'block' : 'none';
        } else {
            info.setAttribute( 'class', this.dataset.state );
            display = 'block';
        } 

        info.innerHTML = this.dataset.address;
        info.style.display = display;

    }, false );

};

Element.prototype.hasClass = function ( className ) {
    return this.className.split( ' ' ).indexOf( className ) > -1;
};

HTML： 

<div id="map-view">
<img id="map" src="http://thinkingstiff.com/images/matt.jpg" usemap="#map"/>
<map name="map">
    <area shape="rect" coords="0,0,50,50" data-state="california" 
    data-address="123 One St&lt;br /&gt;Chronic Town, CA 99190" href="#" />
    <area shape="rect" coords="50,50,150,150" data-state="oregon" 
    data-address="345 Two St&lt;br /&gt;Bird On It, OR 89190" href="#" />
</map>
<div id="info"></div>
<div>

CSS： 

#map {
    height: 245px;
    width: 180px;
}

#map-view {
    position: relative;
}

#info {
    background-color: white;
    display: none;
    position: absolute;
    z-index: 1;
}

.california {
    left: 50px;
    top: 25px;
}

.oregon {
    left: 150px;
    top: 125px;
}
ThinkingStiff
2011-12-26