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.
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" />
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.
Call JavaScript from the shape:
<area shape="poly" coords="251,125,241,181,287" href="javascript:yourFunction(someVariable)" target="_self" alt="section1" />
精彩评论