Jquery Accordion для активации определенных панелей с якорными тегами / хешем URL - PullRequest
Новая
       24

Jquery Accordion для активации определенных панелей с якорными тегами / хешем URL

2 голосов
/ 11 ноября 2011

У меня почти идентичная проблема с заданным здесь вопросом ( Ссылка для открытия jQuery Accordion ?), Но я не смог правильно реализовать ответы.

Я попробовал это решение, но оно не сработало для меня: 

$("#accordion").accordion("activate", <?php echo $_GET['id']; ?>);

У меня есть аккордеон Jquery со следующим кодом: 

<script type="text/javascript">
        $(function(){

            // Accordion
            $("#accordion").accordion({ 
                header: "h3", 
                autoHeight: false,
                navigation: true,
                collapsible: true,
                active: false
            });
            $(".exlnk").click(function(event){
      window.location.hash=this.hash;
 });    

        });


</script>
<script type="text/javascript">
function Click1(){  
$("#accordion").accordion('activate' , 0)
} 
function Click2(){  
$("#accordion").accordion('activate' , 1)
} 

</script>

Упрощенный HTML: 

 <h3><a class="exlnk" href="#about" title="About">About</a></h3>
<div>content blah blah</div>
<h3><a class="exlnk" href="#about" title="About">About</a></h3>
<div>Blah blah</div>

Приведенный выше код позволяет мне иметь ссылки на главной странице, которые активируют указанную панель.

Бит exlnk дает каждой панели хэш при нажатии на нее, который я прочитал в этом уроке (http://www.michaeljacobdavis.com/tutorials/statesavingaccordion.html), создавая сохраняющие состояние панели с возможностью создания закладок. Он назначает хэш, но не активирует панели и не спасает их от закрытия при повторной загрузке.

Я хочу иметь возможность иметь внешнюю ссылку на http://www.mysite.com/page#anchor и открывать страницу с соответствующей открытой панелью. Мой обходной путь для ссылки со страницы аккордеона очень полезен!

Большое спасибо за любую помощь ... Я прочитал все вопросы и ответы на этом сайте, связанные со скриптом Accordion, и не смог заставить работать ни один из ответов. Я очень плохо знаком с Jquery / Javascript, поэтому ответы, которые объясняют все этапы реализации и где разместить каждый предложенный код, были бы замечательными.

1 Ответ

1 голос
/ 11 ноября 2011

Вы захотите связать свой код на стороне сервера с помощью метода .activate(), который должен позволить вам динамически отображать панель на основе того, что передается в качестве индекса или селектора:

Программно активировать контентную часть Аккордеона. Индекс может быть номером с нулевым индексом, чтобы соответствовать позиции заголовка закрыть или селектор, соответствующий элементу. Пройдите false, чтобы закрыть все (только возможно с collapsible:true).

Пример:

Если возможно, вместо передачи $_GET['id'] передайте имя селектора, соответствующего элементу, который вы хотите активировать. Например: 

$("#accordion").accordion("activate", "#<?php echo $_GET['tab']; ?>");

$_GET['tab'] будет именем селектора вашего прохождения. Конечно, если селектор должен быть классом, просто измените хэш на точку.

Если вы хотите, чтобы что-то активировалось на основе ссылки, такой как http://www.mysite.com/page#anchor, вы захотите получить хеш с помощью javascript при загрузке вашей страницы и использовать этот хеш (который будет именем селектора, который будет активировать панель) вместо $_GET['id']

...