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

Reply via email to