HOWTO: JQuery Accordion: ссылка на внутреннее меню переключения - PullRequest
0 голосов
/ 29 июня 2010

В шапке моего сайта у меня 3 случайных превью.

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

Нажав на один из превью, вы попадаете на веб-страницу с меню "JQuery Accordion". Например:

  • menu1
  • menu2
  • menu3

Как открыть раздел «Переключатель», который я нажимаю в заголовке?

Ответы [ 2 ]

0 голосов
/ 29 июня 2010

HTML с меню:

<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 с классами аккордеона:

<div class="title">TITLE1</div>
<div class="title">TITLE2</div>
<div class="content">CONTENT1</div>
<div class="content">CONTENT2</div>
0 голосов
/ 29 июня 2010

Используйте метод активации для Аккордеона.Предполагая, что они находятся в том же порядке, что и элементы списка в заголовке, вы можете использовать индексированную версию.

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

РЕДАКТИРОВАТЬ :

Оказывается, это проще, чемЯ подумал, если вы хотите указать раздел, чтобы открыть на другой странице.Аккордеон уже справляется с этим с опцией navigation.Просто убедитесь, что хеш в URL соответствует идентификатору секции аккордеона, которую вы хотите.Обратите внимание, что этот код идет на странице с аккордеоном.

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