CSS ..我怎樣才能使按鈕顯示的圖像

Question

我有一個關於使按鈕顯示的圖像 例如問題，我有四個按鈕 我想顯示在圖像

在其他相同內容的圖像中的每個按鈕關鍵詞： 當您按下其中一個按鈕顯示您的圖像

這裏有一個例子：http://jsfiddle.net/i5yal/yvCtQ/1/

<div id="section-container"> 
<div class="section-img-container"><a>images will appear here</a> 
</div> 
</div> 

<div id="section-button-container"><div> 
<div class="section-button1"><a>1</a> 
</div> 

<div class="section-button2"><a>2</a> 
</div> 

<div class="section-button3"><a>3</a> 
</div> 

<div class="section-button4"><a>4</a> 
</div> 

</div> 
</div> 

CSS代碼：

#section-container { 
background-color: #C0C0C0; 
width: 300px; 
height: 300px; 
margin:0 auto; 
} 

#section-button-container { 
width: 300px; 
height: 30px; 
margin:0 auto; 
} 

.section-button1 { 
background-color: #808000; 
width: 30px; 
height: 30px; 
float: left; 
display: block; 
margin-left: 30px; 
margin-right: 20px; 
} 

.section-button2 { 
background-color: #808000; 
width: 30px; 
height: 30px; 
float: left; 
display: block; 
margin-left: 20px; 
margin-right: 20px; 
} 

.section-button3 { 
background-color: #808000; 
width: 30px; 
height: 30px; 
float: left; 
display: block; 
margin-left: 20px; 
margin-right: 20px; 
} 

.section-button4 { 
background-color: #808000; 
width: 30px; 
height: 30px; 
float: left; 
display: block; 
margin-left: 20px; 
margin-right: 20px; 
} 

.section-img-container { 
background-color: #008080; 
background-position: center center; 
width: 270px; 
height: 270px; 
margin: 0 auto; 
} 

Answer 1

爲了避免使用JavaScript，可以使用CSS（儘管爲了做到這一點，必須對HTML進行一些小的調整）;所以給出的修改HTML：

<div id="section-container"> 
    <div class="section-img-container"> 
     <input type="radio" name="images" id="img1" /> 
     <img src="http://placekitten.com/300/300/" /> 
     <input type="radio" name="images" id="img2" /> 
     <img src="http://lorempixel.com/300/300/nightlife" /> 
     <input type="radio" name="images" id="img3" /> 
     <img src="http://lorempixel.com/300/300/people" /> 
     <input type="radio" name="images" id="img4" /> 
     <img src="http://dummyimage.com/300x300/000/f90.png&text=image+lorem+ipsum" /> 
    </div> 
</div> 

<div id="section-button-container"><div> 
    <div class="section-button1"> 
     <label for="img1">1</label> 
    </div> 

    <div class="section-button2"> 
     <label for="img2">2</label> 
    </div> 

    <div class="section-button3"> 
     <label for="img3">3</label> 
    </div> 

    <div class="section-button4"> 
     <label for="img4">4</label> 
    </div> 

    </div> 
</div> 

下面CSS：

#section-button-container label { 
    display: block; 
    text-align: center; 
    height: 100%; 
    line-height: 30px; 
    cursor: pointer; 
} 
input[type=radio], 
input[type=radio] + img { 
    display: none; 
} 

input:checked + img { 
    display: block; 
} 

JS Fiddle demo。

但這確實需要瀏覽器支持:checked僞選擇器和CSS下一個兄弟+組合器，並且利用label能夠檢查/取消選中無線電輸入（只要label的for屬性標識相關的input的id）。

參考文獻：

• :checked pseudo-selector`。
• :checked pseudo-selector compatibility。

Answer 2

對於動畫部分調查這個庫，用它自己和它工作得很好=>animate.css

它是相當瑣碎這裏的圖像的變化是如何做這件事。

$(document).ready(function() { 
    var viewer = $('img.viewer'); 
    $('a.section-button').click(function() { 
     viewer.attr('src', 'your new path to new image'); 
    }); 
}); 

在上面我補充說，將附屬於主視圖區中的類，所以你必須：

<img class="veiwer" />. 

你只隱藏這樣或加載默認的圖像時，頁面加載。

還在每個錨上使用「section-button」類。我沒有考慮在選擇列表中的定位，這意味着1,2,3,4個圖片等等。在部分按鈕上可能最容易擁有數據屬性。所以像。

<a class="section-button" data-imgrc="path to the large image" data-number="1">1</a> 

注意你也可以，如果你只是有部分按鈕，中間的數字只是抓取器內部文本但是我個人更喜歡數據的屬性。