Как активировать jquery гармошку из карты изображений href? - PullRequest
Новая
       24

Как активировать jquery гармошку из карты изображений href?

0 голосов
/ 24 марта 2011

Я искал все и не нашел ответа на мой конкретный вопрос.

У меня есть простой аккордеон jquery, и я хочу иметь возможность активировать определенный раздел по внутренней ссылке.Ссылка идет с карты изображения, поэтому зритель нажимает на область изображения и активирует эту часть аккордеона.Кажется достаточно простым, но у меня чертовски много времени с этим.

Так, например, у меня пока есть: 

$(function() {
$( "#myaccordion" ).accordion({
    active: false, 
    autoHeight: false, 
    navigation: true        
});
});

<img src="Map.png" name="map" width="650" height="336" usemap="#hotspot" id="mymap" />

<map name="hotspot" id="hotspot">
    <area shape="poly" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />
    <area shape="poly" coords="155,223,133,194,96" href="#section2" target="_self" alt="section2" />
</map>

<div id="myaccordion">
<h3><a href="#section1">Section 1</a></h3>
<div>
    <p>
    Section 1 content
    </p>
</div>
<h3><a href="#section2">Section 2</a></h3>
<div>
    <p>
    Section 2 content
    </p>
</div>

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

Самое близкое, что я смог получить, основываясь на некоторых других потоках, - это активировать раздел из внешней ссылки, используя href #, но мне нужно, чтобы это происходило без перезагрузки страницы.

Ответы [ 3 ]

0 голосов
/ 24 марта 2011

Задавая атрибуты заголовков разделов id, вы можете просто click() указать их, и он активирует этот раздел раскрывающегося списка: 

<h3 id="acc_1"><a href="#section1">Section 1</a></h3>
<div>
    <p>
    Section 1 content
    </p>
</div>
<h3 id="acc_2"><a href="#section2">Section 2</a></h3>
.... <!-- and so forth -->

В тегах area вы можетедобавить onclick атрибутов, например, так: 

<area shape="poly" onclick="$('#acc_1').click();" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />
0 голосов
/ 24 марта 2011

Вызов JavaScript из формы: 

 <area shape="poly" coords="251,125,241,181,287" href="javascript:yourFunction(someVariable)" target="_self" alt="section1" />
0 голосов
/ 24 марта 2011

Я думаю (но я не уверен), что знаю, чего вы хотите достичь.Почему бы вам не использовать ' триггер '.Это будет имитировать событие.Например, если вы хотите вызвать нажатие на #objectA при наведении курсора на #objectB, вы должны использовать: 

$('#obectB').bind('hover', function() {
    $('#objectA').trigger('click');
});

В вашем случае, когда нажата ссылка, вы моделируете любое событие на любом объектеэто заставит ваш баян делать то, что вы хотите.

...