用btn-group切換一組圖像

我不想一次顯示所有的圖像，因爲它只是亂翻頁面設計。我想單擊bootstrap btn-group中的一個按鈕，並顯示相應的圖像。不是一個JavaScript/jQuery的人，所以我需要一點幫助。用btn-group切換一組圖像

<div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-default">Front</button> 
    <button type="button" class="btn btn-default">Back</button> 
    <button type="button" class="btn btn-default">Left</button> 
    <button type="button" class="btn btn-default">Right</button> 
    </div> 

    <div class="front-product-img"> 
    <% front = @product['colors'][0]['images'].find{|img| img['label'] == 'Front'} %> 
    <%= image_tag front['url'], class: 'img-responsive' if front.present? %> 
    </div> 

    <div class="back-product-img"> 
    <% back = @product['colors'][0]['images'].find{|img| img['label'] == 'Back'} %> 
    <%= image_tag back['url'], class: 'img-responsive' if back.present? %> 
    </div> 

    <div class="left-product-img"> 
    <% left = @product['colors'][0]['images'].find{|img| img['label'] == 'Left'} %> 
    <%= image_tag left['url'], class: 'img-responsive' if left.present? %> 
    </div> 

    <div class="right-product-img"> 
    <% right = @product['colors'][0]['images'].find{|img| img['label'] == 'Right'} %> 
    <%= image_tag right['url'], class: 'img-responsive' if right.present? %> 
    </div>

來源

2016-02-02 DhatchXIX

$(".btn-group[role='group'] button[type=button]").click(function() { 
$("."+$(this).text().toLowerCase()+"-product-img").toggle(); 
});

使用您的要求上面這段代碼..

來源

2016-02-02 16:20:18 ameenulla0007

它不是完全正確，關閉。我甚至無法描述它在做什麼，因爲每次我重新加載時它都會做一些不同的事情。首先顯示頁面加載時的所有圖像。當我點擊前面的BTN它顯示回來，然後它不再顯示IMG了。希望我能更好地描述它，但對於它正在做什麼感到困惑。 – DhatchXIX

用btn-group切換一組圖像

回答

相關問題