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>

使用Jquery UI创建图像选项卡

1 个答案: