jQuery - selector problems in hiding tab content

Question

I'm having trouble hiding the contents of some divs in a pseudo-tab set up - my code is at http://rudderlive.bito.org.nz/employment%5Fdev2.asp

Tab 1 to Tab 2 works fine, but moving from Tab 2 to Tab 3 does not hide the div of Tab 2, and moving from Tab 3 back to Tab 1 doesn't hide the Tab 2 or 3 divs.

My code is as follows - but it makes more sense when viewed together with the HTML (at the above page)...

$('ul.tabNav a').click(function() {
    var curChildIndex = $(this).parent().prevAll().length + 1;
    $(this).parent().parent().children('.current').removeClass('current');
    $(this).parent().addClass('current');
    $('div.tabContainer').children('.current').fadeOut('fast',function() {
        $(this).removeClass('current');
        $('div.tabContainer').children('div:nth-child('+curChildIndex+')').fadeIn('normal',function() {
        $(this).addClass('current');
        });
    });
    return false;
});

Answer 1

there is something wrong with putting current class to new visible content. so you can try this script.

$('div.tabContainer')
  .children('.current')
  .removeClass('current') // put here
  .fadeOut('fast',function() {

    // $(this).removeClass('current'); remove from here

    $('div.tabContainer')
      .children('div:nth-child('+curChildIndex+')')
      .addClass('current') // put here
      .fadeIn('normal',function() {
        // $(this).addClass('current'); remove from here
      });
  });

hope it will help

Answer 2

This code works (checked with firebug). The $(this) seems to do not work in your callbacks.

$("ul.tabNav a").click( function()
{
    var curChildIndex = $(this).parent().prevAll().length;

    $(this).parent().siblings().removeClass( "current" );
    $(this).parent().addClass( "current" );

    var tabContent = $(this).parents( "ul.tabNav:first" ).next( ".tabContainer" ).children( ".current" );
    tabContent.fadeOut( "fast", function()
    {
        //console.log( $(this) ); --> returns the instance of the window

        tabContent.removeClass( "current" );
        var newTabContent = tabContent.parent().children( "div:eq("+ curChildIndex +")" );

        newTabContent.fadeIn( "fast", function()
        {
            newTabContent.addClass( "current" );
        } );
    } );

    return false;
} );