Вкладки JQuery, использующие ajax для загрузки div

Question

Я пытаюсь использовать вкладки JQuery с ajax для загрузки определенного div на вкладки:

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">All Users</a></li>
    <li><a href="front_end/customer/customers.php#tabContent">Customers</li>
    <li><a href="#tabs-3">Availability</a></li>
    <li><a href="#tabs-4">Available Dates</a></li>
    <li><a href="#tabs-5">Instructors</a></li>
    </ul>

Использование следующего JQuery

$(function() {
    $( "#tabs" ).tabs({
        load: function(event, ui) {
            console.log(ui);
        },
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab" );
            }
        }
    });
});

Но это загрузка всейpage (2nd li), а не просто #tabContent div.Что мне нужно сделать, чтобы загрузить его в div?

Answer 1

А вот как вы можете указать элементы панели. Просто добавьте атрибут aria-controls к элементу LI вашей вкладки, который указывает на идентификатор элемента целевой панели:

<div id="tabs">
<ul>
    <li aria-controls="my-first-tab"><a href="ajax-content-1.html">Tab 1</a></li>
    <li aria-controls="my-second-tab"><a href="ajax-content-2.html">Tab 2</a></li>
    <li aria-controls="my-third-tab"><a href="ajax-content-3.html">Tab 3</a></li>
</ul>

<div id="my-first-tab"></div>
<div id="my-second-tab"></div>
<div id="my-third-tab"></div>

Answer 2

Я думаю, вам может понадобиться добавить пробел перед # в вашем URL.

См. «Загрузка фрагментов страницы» на http://api.jquery.com/load