JQuery tabs using ajax to load div

I'm trying to use JQuery tabs with ajax to load a specific div to the tabs:

<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 开发者_JS百科href="#tabs-5">Instructors</a></li>
    </ul>

Using the following 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" );
            }
        }
    });
});

But this is loading the whole page (2nd li) rather than just the #tabContent div. What do I need to do to get it to just load the div?

I think you might just need to add a space before the # in your url.

See "Loading Page Fragments" at http://api.jquery.com/load

And here’s how you can specify the panel elements. Simply add an aria-controls attribute to your tab LI element that points to the ID of your target panel element:

<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>