Question

hi i have a 3 tabs which contents are populated by jquery hide and fadeIn().All are working fine,but when we click on each tab very fastly,the contents get merged For Ex: First tab may contain the second tab content.

Note: It works fine when slowly clicks on each tab,only speed and continuous clicks causes the problem

Jquery:

    $('.secondtab').on('click',function(){

$('.firsttabcontent,.thirdtabcontent').hide();
removeActiveTab();
$(this).addClass('activeclasstab');

$('.secondtabcontent').hide().fadeIn();


});

$('.firsttab').on('click',function(){
$('.secondtabcontent,.thirdtabcontent').hide();
removeActiveTab();
$(this).addClass('activeclasstab');


$('.firsttabcontent').hide().fadeIn();

});
$('.thirdtab').on('click',function(){
$('.secondtabcontent,.firsttabcontent').hide();
removeActiveTab();
$(this).addClass('activeclasstab');


$('.thirdtabcontent').hide().fadeIn();

});

pls help to solve this??

Answer 1

Finally i got the solution. I used stop() to prevent the content overlap between the tabs when clicking the tabs very fast.

$('.secondtab').on('click',function(){

$('.firsttabcontent,.thirdtabcontent').hide();
$('.secondtabcontent').stop().hide().fadeIn();


});