Afficher/Cacher div on clic en utilisant jQuery

Question

J'ai 4 divs et sur le clic de la navigation je veux montrer l'un d'entre eux et cacher les autres. Je l'ai fonctionné mais je ne me sens pas aussi lisse que je le sais, c'est définitivement mon code qui doit être refactorisé! Heres ce que j'ai.

$('#details-speakers').click(function() { 

    $('#home').slideUp('slow', function() {}); 
    $('#sessions-content').slideUp('slow', function() {}); 
    $('#cases-content').slideUp('slow', function() {}); 
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#speakers-content').slideDown('slow', function() { 
     $('#details-speakers').addClass('selected'); 
     //Remove other classes 
     $('#details-sessions').removeClass('selected'); 
     $('#details-cases').removeClass('selected'); 
     $('#details-workshops').removeClass('selected'); 
    }); 
}); 
$('#details-sessions').click(function() { 

    $('#home').slideUp('slow', function() {}); 
    $('#speakers-content').slideUp('slow', function() {}); 
    $('#cases-content').slideUp('slow', function() {}); 
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#sessions-content').slideDown('slow', function() { 
    $('#details-sessions').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers').removeClass('selected'); 
     $('#details-cases').removeClass('selected'); 
     $('#details-workshops').removeClass('selected'); 
    }); 
}); 
$('#details-cases').click(function() { 

    $('#home').slideUp('slow', function() {}); 
    $('#speakers-content').slideUp('slow', function() {}); 
    $('#sessions-content').slideUp('slow', function() {}); 
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#cases-content').slideDown('slow', function() { 
    $('#details-cases').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers').removeClass('selected'); 
     $('#details-sessions').removeClass('selected'); 
     $('#details-workshops').removeClass('selected'); 
    }); 
}); 

Answer 1

La douceur ou l'absence de celui-ci n'est pas la faute de votre code. Certains navigateurs sont lents. Ce n'est pas quelque chose qui peut être corrigé par JS.

Vous pouvez rendre votre code plus court mais je ne pense pas qu'il y aura d'amélioration des performances matérielles.

$('#details-speakers').click(function() { 
    $('#home, #sessions-content, #cases-content').slideUp('slow'); 
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#speakers-content').slideDown('slow', function() { 
     $('#details-speakers').addClass('selected'); 
     //Remove other classes 
     $('#details-sessions, #details-cases, #details-workshops').removeClass('selected'); 
    }); 
}); 

$('#details-sessions').click(function() { 
    $('#home, #speakers-content, #cases-content').slideUp('slow'); 
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#sessions-content').slideDown('slow', function() { 
    $('#details-sessions').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers, #details-cases, #details-workshops').removeClass('selected'); 
    }); 
}); 

$('#details-cases').click(function() { 
    $('#home, #speakers-content, #sessions-content').slideUp('slow'); 
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#cases-content').slideDown('slow', function() { 
    $('#details-cases').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers, #details-sessions, #details-workshops').removeClass('selected'); 
    }); 
}); 

Answer 2

Si c'est une approche plus propre que vous cherchez comment quelque chose comme ceci:

$(".my4Divs").click(function() { 
    var self = this; 
    $(".my4Divs").each(function() { 
     if(self == this) { 
      $(self).addClass("selected"); 
      ... 
      ... 
      return; 
     } 
     $(this).removeClass("selected"); 
     ... 
     ... 
    }); 
}); 

Answer 3

programmation Ctrl + C et Ctrl + V conduit en enfer ... Je pense que vous pouvez faire quelque chose comme ça:

var divs = $('#details-speakers, #details-sessions, #details-cases'); 

divs.click(function() { 
    divs.not(this).add('#home').slideUp('slow'); 
    // animation with home and body 
    $(this).slideDown('slow', function() { 
     $(this).addClass('selected'); 
     divs.not(this).removeClass('selected'); 
    }); 
} 

et la performance dépend beaucoup de chose (firebug est, de contenu, de divs divs style, milieux semi-transparent, etc.) - et pas seulement pauvre javascript.