尋找標籤導航菜單樣式？

Question

我正在尋找一個標籤導航菜單，該菜單可以爲圖片提供作爲tabitems。 所以我有這樣的事情：

<div class="menu"> 

      <a href="#"> 
        <img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" /> 
      </a> 
      <a href="#"> 
        <img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" /> 
      </a> 
      <a href="#"> 
        <img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/> 
      </a> 
      <a href="#"> 
        <img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" /> 
      </a> 
      <a href="#"> 
        <img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" /> 
      </a> 


     </div> 

我已經嘗試了一些jQuery的/ CSS的人，但我無法找到一個給了我一個很好的樣式，包含圖像的標籤？

Answer 1

嘗試使用jQuery UI選項卡。

結帳上http://jqueryui.com/demos/tabs/#default

的代碼替換演示即導航項目，

<ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
</ul> 

與你的內容，就像...

<ul> 
    <li> 
    <a href="#"><img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" /></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" /></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" /></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" /></a> 
    </li> 
</ul> 

圖像的大小應適合你的標籤。

希望你能理解... :)