Показать / Скрыть Div On Click (многочисленные Div)

Question

Сценарий:

У меня есть карта штатов США.Поверх карты штата я изготовил карту местности, чтобы сделать каждое состояние кликабельной ссылкой.В каждом штате у меня есть <div> с абсолютной позицией и CSS-стилем, чтобы <div> выглядел как выноска или окно всплывающей подсказки, содержащее информацию об адресе и веб-сайте головного офиса в каждом конкретном штате.

Итак, да, у меня есть 50 различных <div> с абсолютным позиционированием, которые в настоящее время установлены на «видимость: скрытый».

Что я пытаюсь выполнить:

Когда вы нажимаете на конкретную ссылку с карты местности, <div> для этого штата США появится в соответствующемместо нахождения.Кроме того, когда вы щелкаете в точно том же состоянии, <div> будет скрываться, или когда вы щелкаете в другом состоянии, все <div> s скрываются, и отображаются правильные <div> для нового состояния.

Я бы предпочел сделать это простым Javascript (не Jquery), так как в конечном итоге страница будет загружена на веб-сайт с Drupal CMS.

Пожалуйста, помогите.Я бы предпочел не кодировать каждое состояние как кнопку и писать пятьдесят различных сегментов кода JavaScript.

Answer 1

Я бы немного изменил ваш дизайн и использовал бы один 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;
}

Answer 2

Итак, вам нужно решить три основные проблемы:

1. перечислить все ссылки
2. прикрепить обработчики событий onclick к этим ссылкам
3. отобразить ссылки наdivs

Вы можете перечислять ссылки с помощью функций .getElement *.В зависимости от разметки вашего списка, вам может понадобиться больше времени, прежде чем вы получите нужные элементы;jQuery действительно поможет упростить функции .getElement *.

Затем вы присоедините обработчик onclick к каждой из этих ссылок.Вы можете сделать это, присвоив атрибуту element.onclick.Это ключевая часть в написании «ненавязчивого javascript», который интенсивно используется в jQuery.

Наконец, вам нужен способ отобразить ссылки на div.Самое простое - создать идентификатор целевого div, используя идентификатор ссылок.Так, например, если идентификатор ссылки «io» (для Айовы), то вы переключите видимость div, идентификатор которого «s_io», просто добавив «s_» к идентификатору ссылки.В качестве альтернативы вы можете использовать хеш-карту или пользовательский атрибут данных HTML 5 для хранения идентификатора целевого div или использовать str.replace или str.substring.

Это можно увидеть в действии в этом jsfiddle , другая версия с использованием карты изображений .