2009-12-21 5 views
0

Je vais avoir du mal à cacher le contenu de certains divs dans un pseudo-onglet mis en place - mon code est à http://rudderlive.bito.org.nz/employment_dev2.aspjQuery - problèmes de sélection dans le contenu de l'onglet cacher

Tab 1 à l'onglet 2 fonctionne très bien, mais passer de Les onglets 2 à 3 ne cachent pas la div de l'onglet 2, et le passage de l'onglet 3 à l'onglet 1 ne cache pas les divs de l'onglet 2 ou 3.

Mon code est la suivante - mais il est plus logique lorsqu'on regarde en même temps que le code HTML (à la page ci-dessus) ...

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

Répondre

0

Ce code fonctionne (vérifié avec Firebug). Le $(this) semble ne pas fonctionner dans vos rappels.

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

Merci tas - beaucoup mieux que mon code (à part le fait que ça marche aussi!) Bruce – TomBaine

1

il y a quelque chose de mal à mettre current classe du nouveau contenu visible. afin que vous puissiez essayer ce 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 
     }); 
    }); 

espère que cela vous aidera

+0

Merci - c'est génial – TomBaine

Questions connexes