하나의 div가 다른 div를 변경합니다.

Question

일부 div가 변경을 제어하고 다른 div를 숨기거나 표시하려고합니다.

많이 읽었지만 도움이되지 않습니다. 나는 그것을 작동시키기 위해 많이 썼지 만 질의가 "적은 것을 적고, 더 많이"하는 쉬운 방법이 있어야합니다. 여기에 내가 가진 것이있다.

$(window).load(function() { 
    $('#left2, #left3, #left4, #left5, #left6, #left7, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic5, #header-pic6, #headerpic7').hide(function() {  
    $('#right-01').click(function() { 
    $('#coin-slider, #header-pic, #header-pic3, #header-pic4, #header-pic5, #header-pic6, #headerpic7, #left, #left3, #left4, #left5, #left6, #left7').hide(); 
    $('#left2, #header-pic2').show(); 
$('#right-02').click(function() { 
$('#coin-slider, #header-pic, #header-pic2, #header-pic4, #header-pic5, #header-pic6, #header-pic7, #left, #left2, #left4, #left5, #left6, #left7').hide(); 
$('#left3, #header-pic3').show(); 
    $('#right-03').click(function() { 
    $('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic5, #header-pic6, #header-pic7, #left, #left2, #left3, #left5, #left6, #left7').hide(); 
    $('#left4, #header-pic4').show(); 
$('#right-04').click(function() { 
$('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic6, #header-pic7, #left, #left2, #left3, #left4, #left6, #left7').hide(); 
$('#left5, #header-pic5').show(); 
    $('#right-05').click(function() { 
    $('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic5, #header-pic7, #left, #left2, #left3, #left4, #left5, #left7').hide(); 
    $('#left6, #header-pic6').show(); 
    $('#right-06').click(function() { 
    $('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic5, #header-pic6, #left, #left2, #left3, #left4, #left5, #left6').hide(); 
    $('#left7, #header-pic7').show(); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 
}); 

Answer 1

귀하의 질문에 대한 답변이 정직하지 않으므로 솔직하게 확신하지 못합니다.

이 예에서는 ID로 선택한 요소의 불필요한 양을 보여줍니다. CSS 클래스를 사용하여 마크 업을 구조화하십시오. 그런 다음 ID 대신 jQuery to select elements by class을 사용하십시오.