How to use jQuery UI tabs to load external div via ajax

I'm using the Jquery UI tabs functionality to load content via ajax. I'd like to load a particular div in the ajax call, not the entire page. Is this possible without using jQuery's load()?

As you can see from the code, it's a stock standard basic jQuery tabs implementation, but I want a particular div rather than the full page.

Here's my 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 co开发者_如何学Pythonntent</div>
</div>

And the inline script:

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

Anyone know if this is possible?

Nathan.

Yes, it is possible. Use jQuery ajax "load" function. Example:

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

For your 3rd tab you should manually load content via ajax call, also you can define selector which exactly part of loaded page you need. So, create 3rd tab as via general way, load page content for 3rd tab and create tabs. Or you can dynamically load 3rd tab's content when the user clicks on tab.

More information here: http://api.jquery.com/load/, please see paragraph "Loading Page Fragments".