使用jQuery UI创建图像选项卡

Question

我想使用自定义图像作为选项卡来显示和隐藏这样的divs：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移至小提琴，添加了一些净图像，一切正常。

如果您想要特定的图像，则必须将它们进行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>