点击显示/隐藏Div (无数Div)

Question

设想情况：

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

因此，是的，我有50个不同的<div>的绝对定位，目前设置为“可见性:隐藏”。

我想要完成的事情：

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

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

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

Answer 1

所以你有三个主要的问题要解决：

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

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

接下来，将onclick处理程序附加到这些链接中的每一个。您可以通过为element.onclick属性赋值来完成这一任务。这是编写“不引人注目的javascript”的关键部分，它在jQuery中被大量使用。

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

您可以在这个小提琴，另一个使用图像映射的版本中看到这一点。

Answer 2

我会稍微改变您的设计，并使用一个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;
}