一個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類構建標記。然後使用jQuery to select elements by class而不是ID。