javascript에서 스위치/대소 문자로 바꾸기

Question

페이지에 'div id = foo_ (현재 메뉴 항목)'을 'div id = foo_ (선택한 메뉴 항목)'로 바꿀 메뉴 항목이 있습니다. 'div 클래스 = foo는 '여기

는

$('#t1').click(function() { 
     $('#attorney').show(); 
     $('#insurance,#financial,#estate,#trust,#death').hide(); 
    }); 

    $('#t2').click(function() { 
     $('#insurance').show(); 
     $('#attorney,#financial,#estate,#trust,#death').hide(); 
    }); 

    $('#t3').click(function() { 
     $('#financial').show(); 
     $('#attorney,#insurance,#estate,#trust,#death').hide(); 
    }); 

    $('#t4').click(function() { 
     $('#estate').show(); 
     $('#attorney,#insurance,#financial,#trust,#death').hide(); 
    }); 

    $('#t5').click(function() { 
     $('#trust').show(); 
     $('#attorney,#insurance,#financial,#estate,#death').hide(); 
    }); 

    $('#t6').click(function() { 
     $('#death').show(); 
     $('#attorney,#insurance,#financial,#estate,#trust').hide(); 
    }); 

Answer 1

스위치 문이 추악한 종류 - 중입니다 ... 내가 뭘 찾았는지, 그리고 아침 식사를 유지하려고합니다.

var things = ['attorney', 'estate', 'insurance', 'financial', 'trust', 'death']; 
var guide = { 
    t1: 'attorney', t2: 'estate', t3: 'insurance', t4: 'financial', t5: 'trust', t6: 'death' 
}; 

$('#t1, #t2, #t3, #t4, #t5, #t6').click(function() { 
    var clicked = $(this).attr('id'); 
    $.each(things, function(_, thing) { 
    var $thing = $('#' + thing); 
    if (guide[clicked] == thing) $thing.show(); else $thing.hide(); 
    }); 
}); 

당신은 또한 그들이 무엇이든 "t"thingies, 대신 직접의 live()와 이벤트 핸들러를 설정하는 것이 좋습니다. 모든 "일"(변호사 등) 클래스 이름을 부여 할 수 있다면 다음 방금

$('.thingClass').hide(); 

로 클릭 처리기에 빨리 그들 모두를 숨길 수 후 바로 하나를 만들기 때문에 그것은 또한, 깔끔한 것 클릭 한 탭에 적합한 표시. 그 다음이 같은 것을 볼 수 있었다 :

var guide = { 
    t1: 'attorney', t2: 'estate', t3: 'insurance', t4: 'financial', t5: 'trust', t6: 'death' 
}; 
$('#t1, #t2, #t3, #t4, #t5, #t6').click(function() { 
    $('.thingClass').hide(); 
    $('#' + guide[$(this).attr('id')]).show(); 
}); 

마지막으로, 당신이 사용할 수있는 jQuery를 탭 중 하나를시키는 것을 고려 플러그인