Переключить несколько предметов

Question

Я хочу, чтобы элементы переключались вот так ... но одна проблема.Я могу нажать на все элементы, и они все показывают.Я хочу, чтобы кнопки открывали соответствующие контейнеры, но показывали только по одному за раз, вместо того, чтобы щелкать по каждому из них, и они просто отображали все.хочу, чтобы опция окрашивала поля, помеченные как «infotab_one», а также другие (не _s) цвета при переключении элемента.Спасибо!

Answer 1

var slideAllUp = function(){
    $("#infotab_one_s").slideUp("slow");
    $("#infotab_two_s").slideUp("slow");
    $("#infotab_three_s").slideUp("slow");
    $("#infotab_four_s").slideUp("slow");
    $("#infotab_five_s").slideUp("slow");
};

$("#infotab_one").click(function() {
    slideAllUp();
    $("#infotab_one_s").slideToggle("slow", "linear");
});

$("#infotab_two").click(function () {
    slideAllUp();
    $("#infotab_two_s").slideToggle("slow", "linear");
});

$("#infotab_three").click(function () {
    slideAllUp();
    $("#infotab_three_s").slideToggle("slow", "linear");
});

$("#infotab_four").click(function () {
    slideAllUp();
    $("#infotab_four_s").slideToggle("slow", "linear");
});

$("#infotab_five").click(function () {
    slideAllUp();
    $("#infotab_five_s").slideToggle("slow", "linear");
});

Мне не нравится это решение по следующей причине:

Слишком много кода.Обычно хорошей идеей является попытка использовать как можно меньше кода, и это можно сократить с помощью классов. Таким образом, вы можете делать такие забавные вещи, как:

$(".tab").click(function(){
    $(".desc").slideUp("slow");
    $(".desc[id='"+$(this).attr("desc_id")+"']").slideDown("slow");
});