[jQuery] Overwrite div with .load()
I'm trying to create tabbed content (without a plugin for now)
via .load(). The initial page load works fine but when I place it in
a .click() event I can't figure out how to overwrite the
previous .load() content. Checking in Firebug I can see that the
content is loading. It just isn't overwriting. Any help would be
appreciated. Here is the code.
HTML:
<div class="tabs-navigation">
<ul>
<li>
<a href="http://website.com/?page_id=37" title="Overview">Overview</
a>
</li>
<li>
<a href="http://website.com/?page_id=38" title="Key Benefits">Key
Benefits</a>
</li>
<li>
<a href="http://website.com/?page_id=39"
title="Customers">Customers</a>
</li>
<li>
<a href="http://website.com/?page_id=40" title="Getting
Started">Getting Started</a>
</li>
</ul>
</div>
<div class="tabs-content"></div>
jQuery:
$(document).ready(function() {
var load_url = $('.tabs-navigation ul li:first a').attr('href');
$('.tabs-navigation ul li:first a').addClass('selected');
$(".tabs-content").load(load_url+' .entry');
$('.tabs-navigation a').click(function () {
// Switch class="selected" for the nav
$('.tabs-navigation a').removeClass('selected');
$(this).addClass('selected');
// Assign value of the link target
var content = $(this).attr('href');
// Load in new content
$('tabs-content').load(content+' .entry');
return false;
});
});