开发者

How to activate jquery accordion from an image map href?

开发者 https://www.devze.com 2023-02-19 03:15 出处:网络
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. Th

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" />
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号