Ajax Tabs - load single div from external page

Ajax Tabs - load single div from external page

Hello.

I'm trying to use the Tabs Widget load load content with ajax.  I want to load only a specific element on the external page, not the entire page.  Using jQuery's .load() method, I can load a single div.  I can't figure out how to make that work with the UI.

Here's my html:
  1. <div id="tabs">
            <ul>
                <li><a href="three.html #lorem">Journal </a></li>
                <li><a href="two.html #lorem"> Contact</a></li>
                <li><a href="#panel1"> Services</a></li>
            </ul>   
            <div class="panel" id="panel1">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>








and the jQuery:
  1. $(function() {
                $("#tabs").tabs({
                    ajaxOptions: {
                        error: function(xhr, status, index, anchor) {
                            $(anchor.hash).html("Oops. Couldn't load this tab. We'll try to fix this as soon as possible.");
                        }
                    }
                });
            });








Is this possible? Or do I need to write it manually with the load() method?  The reason I want to use the UI is for the ease of caching the other panels.  Trying to save time.

Thanks for any help.

-Jacob