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

Question

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

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

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

• Nunc tincidunt
• Proin dolor
• Aenean lacinia

Загружает содержимое из того же файла, и URLstatic (default.html).

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

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

• Nunc Tincidunt (например, nunc.php)
• Proin dolor (ex. Proin.php)
• Aenean lacinia (ex. Aenean.php)

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

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

Answer 1

Вы можете присвоить якорям действительные атрибуты 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)

Answer 2

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

[Как ...] ... следовать 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

Answer 3

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

Answer 4

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

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