jQuery - 隐藏选项卡内容中的选择器问题

Question

我无法在伪标签设置中隐藏某些 div 的内容 - 我的代码位于 http://rudderlive.bito.org.nz/employment_dev2.asp

Tab 1 到 Tab 2 工作正常，但从 Tab 2 移动到 Tab 3 不会隐藏 Tab 2 的 div，从 Tab 3 移回 Tab 1 不会隐藏 Tab 2 或 3 div。

我的代码如下 - 但与 HTML 一起查看时更有意义（在上面的页面上）...

$('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

将current 类放入新的可见内容有问题。 所以你可以试试这个脚本。

$('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
      });
  });

希望对你有帮助

Answer 2

此代码有效（用 firebug 检查）。 $(this) 似乎在您的回调中不起作用。

$("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;
} );