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

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

2 个答案: