Как использовать вкладки пользовательского интерфейса jQuery для загрузки внешнего div через ajax

Question

Я использую функциональность вкладок Jquery UI для загрузки контента через ajax. Я хотел бы загрузить определенный div в вызове ajax, а не всю страницу. Это возможно без использования load () jQuery?

Как видно из кода, это стандартная стандартная реализация вкладок jQuery, но мне нужен конкретный div, а не полная страница.

Вот мой HTML:

<div id="tabs">
    <ul>
        <li><a href="tab-1">Tab One</a></li>
        <li><a href="tab-2">Tab Two</a></li>
        <li><a href="http://www.domain.com #target">Ajax tab</a></li>
    </ul>

    <div id="tab-1>Tab one content</div>
    <div id="tab-2>Tab two content</div>
</div>

И встроенный скрипт:

<script>
    $(function() {
        $( "#tabs" ).tabs();    
    });
</script>

Кто-нибудь знает, возможно ли это?

Answer 1

Натан.

Да, это возможно.Используйте функцию jQuery ajax "load".Пример:

$('#result').load('ajax/test.html #container');

Для вашей третьей вкладки вы должны вручную загрузить контент с помощью ajax-вызова, также вы можете определить селектор, какая именно часть загруженной страницы вам нужна.Итак, создайте 3-ю вкладку обычным способом, загрузите содержимое страницы для 3-й вкладки и создайте вкладки.Или вы можете динамически загружать содержимое третьей вкладки, когда пользователь нажимает на вкладку.

Дополнительная информация здесь: http://api.jquery.com/load/, см. Параграф «Загрузка фрагментов страницы».