jquery tabs - load url in current tab?

Question

I'm trying to figure out how to load the url each tab links to inside the tab area onclick, and have been trying to following the docs at http://docs.jquery.com/UI/Tabs#...open_links_in_the_current_tab_instead_of_leaving_the_page, but am clearly not getting it....

This is the HTML markup:

<div class="tabs">
  <ul class="tabNav">
    <li><a href="/1.html#tabone">Tab One</a></li>
    <li><a href="/2.html#tabtwo">Tab Two</a></li>
    <li><a href="/3.html#tabthree">Tab Three</a></li>
  </ul>
</div> 

<div id="tabone"> 
     <!-- Trying to load content from 1.html in this div on click --> 
</div>

<div id="tabtwo"> 
     <!-- Trying to load content from 2.html in this div on click --> 
</div>

<div id="tabthree"> 
     <!-- Trying to load content from 3.html in this div on click --> 
</div>

And this is the jquery I'm trying to use:

$(".tabs").tabs({
    load: function(event, ui) {
            $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;
                });
    }
    }); 

I know I've got some part of this wrong.... I've gone through several iterations (too many to post), and all I get is a blank div... I don't know... Feeling a bit confused here... Help?

Answer 1

The page you reference is intended for loading links referenced on the tab in the current tab, not loading the tab itself from a link. You shouldn't need to use the load method to get links as tabs to work. All you really should need is this (you can omit the "tab" container DIVS). I'm assuming that the other tabs are relative and represent the full tab contents so I've removed the leading / and the hash.

<div class="tabs"> 
  <ul class="tabNav"> 
    <li><a href="1.html" title="Tab One">Tab One</a></li> 
    <li><a href="2.html" title="Tab Two">Tab Two</a></li> 
    <li><a href="3.html" title="Tab Three">Tab Three</a></li> 
  </ul> 
</div>

<script type="text/javascript">
    $(function() {  // note wrap in 'ready" function to make sure DOM is loaded
        $('.tabs).tabs();
    });
</script>