开发者

HOWTO: JQuery Accordion: link to internal toggle menu

开发者 https://www.devze.com 2023-01-04 22:22 出处:网络
In the header of my website I have 3 random previews. <ul id=\"dm_list\"> <li><div id=\"sinistra\"><script>boxsinistro_ita();</script></div></li>

In the header of my website I have 3 random previews.

<ul id="dm_list">
<li><div id="sinistra"><script>boxsinistro_ita();</script></div></li>
<li><div id="centro"><script>boxcentrale_ita();</script></div></li>
<li><div id="destra"><script>boxdestro_ita();</script></div></li>
</ul>

Clicking one of the previews, you go in a webpage with "JQuery Acco开发者_Go百科rdion" Menu. For example:

  • menu1
  • menu2
  • menu3

How can I open the "toggle" section that I click in the header?


Use the activate method for the Accordion. Assuming they are in the same order as the list items in your header, you can use the indexed version.

$('#dm_list > li a').click( function() {
    var index = $('#dm_list > li a').index(this);
    $('#menu').accordion('activate',index);
    return false;
});

EDIT:

Turns out it's easier than I thought if you want to specify the section to open on a different page. The accordion already handles this with the navigation option. Just make sure the hash in the url matches the id of the accordion section you want. Note this code goes on the page with the accordion.

 <script type="text/javascript">
     $(function() {
          $('#menu').accordion( { navigation: true } );
     });
 </script>


HTML with the menu:

<ul id="dm_list">
<li><div id="sinistra"><script>boxsinistro_ita();</script></div></li>
<li><div id="centro"><script>boxcentrale_ita();</script></div></li>
<li><div id="destra"><script>boxdestro_ita();</script></div></li>
</ul>

boxsinistro_ita() = box_centrale_ita() = boxdestro_ita() =

document.write('<a class="swith" rel="'+fotogrande[ry]+'" href='+'"'+link[ry]+'"'+'><img src="'+fotopiccola[ry]+'" border=0><b>'+titolo[ry]+'</b><br>'+descrizione[ry]+'</a>');

HTML with Accordion classes:

<div class="title">TITLE1</div>
<div class="title">TITLE2</div>
<div class="content">CONTENT1</div>
<div class="content">CONTENT2</div>
0

精彩评论

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