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; }); });