Вкладки jQuery, используйте как меню, загружайте страницу при нажатии на ссылку

Я добавил вкладки jQuery на свой будущий сайт. Пока нет проблем.

Но я хочу, чтобы при нажатии на вкладку она работала и вел себя как обычная ссылка.

Пример 1. Посмотрите на эту ссылку http://jqueryui.com/demos/tabs/default.html. . При нажатии на опции:

  • Нунк тинцидунт
  • Проин Долор
  • Энейская лациния

Он загружает содержимое из того же файла, а URL-адрес является статическим (default.html).

Я хочу следующее:

Пример 2: При нажатии на

  • Nunc tincidunt (например, nunc.php)
  • Proin dolor (например, proin.php)
  • Энейская лациния (например, aenean.php)

Я хочу, чтобы пустая страница перезагрузилась. При нажатии на вкладку «Nunc tincidunt» должен загружаться nunc.php (и URL-адрес должен быть изменен), при нажатии на «Proin dolor» должен загружаться proin.php и так далее.

Как мне это сделать?


menu jquery jquery-ui coding-style jquery-ui-tabs
person Fredrik    schedule 03.08.2010    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Вы можете присвоить якорям настоящие href атрибуты, например:

<div id="tabs"> 
    <ul> 
        <li><a href="nunc.php">Nunc tincidunt</a></li> 
        <li><a href="proin.php">Proin dolor</a></li> 
        <li><a href="aenean.php">Aenean lacinia</a></li> 
    </ul>
</div>​​​​​​​​​​

Это по умолчанию попытается загрузить эти страницы через AJAX на соответствующую вкладку. Чтобы предотвратить такое поведение, просто измените window.location самостоятельно в select событие, например:

$("#tabs").tabs({
    select: function(event, ui) {
       window.location = $.data(ui.tab, 'href.tabs');
    }
});​​​​​​​

Вы можете попробовать это здесь (учтите, что вы получите неожиданные/404 страницы , так как этих файлов PHP нет в jsfiddle)

person Nick Craver    schedule 03.08.2010
comment
Это не сработает, так как jQuery выберет первую вкладку при инициализации, поэтому попытайтесь загрузить через ajax первый URL-адрес (nunc.php). Вы можете убедиться в этом в своем образце, наблюдая за сетевой активностью в firebug. Если страница существует, вы получите забавные эффекты, такие как рекурсивная веб-страница, если первая вкладка ссылается на себя. Нам нужен способ полностью деактивировать ajax. Но, похоже, мы больше не можем... - person PowerKiKi; 20.08.2010

arrow_upward
0
arrow_downward

Вы хотите вытащить контент через ajax? Если это так, это должно помочь:

http://jqueryui.com/demos/tabs/ajax.html

person justcompile    schedule 03.08.2010

arrow_upward
0
arrow_downward

Я не уверен, что вы хотите, чтобы он делал, но если он должен открыть ссылку как новую страницу/замену текущей страницы, документация объясняет:

[Как...] ...следовать URL-адресу вкладки, а не загружать ее содержимое через ajax

Обратите внимание, что открытие вкладки в новом окне является неожиданным, например. непоследовательное поведение, выявляющее проблему удобства использования (http://www.useit.com/alertbox/tabs.html ).

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });

См. http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

person MvanGeest    schedule 03.08.2010
comment
Я думаю, что, возможно, есть какой-то конфликт в том, как я использую его, со структурой моего веб-сайта. Позвольте мне объяснить. У меня есть файл header.php, footer.php, который я включаю в свои файлы следующим образом. Пример: файл: add-user.php ‹?PHP include('header.php'); // Здесь размещается содержимое include('footer.php'); ?› В шапке у меня есть вкладки jQuery. Но при реализации header.php в каждом файле я получаю как хорошо структурированные вкладки jQuery, так и сразу под списком ‹ul›‹li› с теми же ссылками, что и на вкладках jQuery, ‹ul› -list hrefs работают, но а не вкладки jQuery. Почему? - person Fredrik; 03.08.2010
comment
то, что вы испытываете, вероятно, то, что я объяснил в своем предыдущем комментарии. Нежелательный вызов ajax из jQuery. Вы нашли решение ? - person PowerKiKi; 20.08.2010

arrow_upward
0
arrow_downward

Конечно, это вопрос замены ваших ссылок (#) вашими ссылками .php и изменения идентификатора ссылок, чтобы они не ссылались на вкладки?

person SimonDowdles    schedule 03.08.2010