使用jQuery UI創建圖像標籤

Question

我想使用自定義圖像作爲標籤來顯示和隱藏這樣的div：http://jqueryui.com/tabs/

我也因爲這是積極的，但不知道如何正確地實現它們的標籤備用圖像。

這傢伙接近，但代碼是混亂和完全不是那麼回事：http://jsfiddle.net/5FVb7/1/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

<script> 
$(function() { 
    $("#tabs").tabs(); 
    }); 
</script> 

這是所有的jQuery UI的網站似乎在暗示需要的腳本？

這是我的html：

<div id="tabs"> 
    <ul> 
     <li><a href="#tab1"><img src="img/bt1.png" /></a></li> 
     <li><a href="#tab4"><img src="img/bt4.png" /></a></li> 
     <li><a href="#tab2"><img src="img/bt2.png" /></a></li> 
     <li><a href="#tab3"><img src="img/bt3.png" /></a></li> 
    </ul> 

    <div id="tab1"><p> Words go here innit </p></div> 

    <div id="tab4"><p> Testa texta </p></div> 

    <div id="tab2"><p> eeyyeeeeee </p></div> 

    <div id="tab3"><p> Cheap as chips </p></div> 
</div> 

我的CSS到目前爲止僅僅是定位和一些風格 - 沒有的功能存在。

Answer 1

我想我可能會錯過一些東西。

將您的html移動到FIDDLE，添加了一些網絡圖像，並且一切正常。

如果你想要特定的圖像，你必須photoshop他們，調整他們適合。

這是你在找什麼？

HTML對縮放後的圖像

 <li><a href="#tab2"><img height='42' width='42' 
           src="http://www.twitip.com/wp-content/uploads/2008 
             /11/twitter-button-small.png" /></a></li>