Show/Hide div on click using jQuery

Question

У меня есть 4 divs и по щелчку навигации я хочу показать одну из них и скрыть другие. У меня это работает, но я чувствую, что это не так гладко, как я знаю, это может быть, его определенно мой код, который нужно реорганизовать! Вот что у меня есть.

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

Гладкость или недостаток не является ошибкой вашего кода. Некоторые браузеры работают медленно. Это просто не то, что можно исправить от JS.

Вы можете сделать свой код короче, но я не думаю, что будут какие-либо улучшения производительности материала.

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

Если это уборщик подход вы ищете, как о чем-то вроде этого:

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

Answer 3

Ctrl + программирование C и Ctrl + V ведет прямо в ад ... Я думаю, что вы можете сделать что-то вроде этого:

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

И производительность зависит от многих вещей (поджигатель на, содержание, дивы дивы стиль, полупрозрачные фоны и т.д.) - не просто бедный JavaScript.