Question

情景：

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

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

我想要完成的任务：

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

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

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

Answer 1

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

枚举所有链接
将onclick事件处理程序附加到这些链接
将链接映射到divs

您可以使用.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，another version using image map中看到这一点。

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;
}

显示/隐藏Div On Click（众多Div）

2 个答案: