How to activate jquery accordion from an image map href?

问题

I've searched all over and havent quite found the answer for my particular question.

I have a simple jquery accordion and I want to be able to activate a particular section from an internal link. The link is coming from an image map so a viewer clicks on a region of the image and it activates that section of the accordion. Seems simple enough but I'm having a hell of a time with it.

So for example I have so far:

$(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>

I know based on what I've been able to find that this code is a ways off from what it needs to be but this is the most I can figure out at the moment.

The closest I've been able to get based on some of the other threads is to activate a section from an external link using an href# but I need that to happen without reloading the page.

回答1:

By giving your section headings id attributes, you can simply click() on them and it will activate that section of the drop down:

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

In your area tags, you can add onclick attributes like so:

<area shape="poly" onclick="$('#acc_1').click();" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />

回答2:

I think (but I'm not sure) that I know what you want to achieve. Why don't you use a 'trigger'. This will simulate an event. For example, if you want to trigger a click on #objectA when you hover #objectB, you'd use:

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

In your case, when the link is clicked, you simulate whatever event on whatever object that would cause your accordion to do what you want.

回答3:

Call JavaScript from the shape:

 <area shape="poly" coords="251,125,241,181,287" href="javascript:yourFunction(someVariable)" target="_self" alt="section1" />

来源：https://stackoverflow.com/questions/5412343/how-to-activate-jquery-accordion-from-an-image-map-href

标签

jquery

accordion

href

imagemap