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?
