0

如何在 jquery UI 选项卡中使用图像而不是文本？使用文本时，选定选项卡的样式与未选定选项卡的样式不同。我必须修改哪些 css 元素才能使其对包含图像的选项卡有用？

我在这里尝试了一些东西，但目前选择哪个选项卡不是很明显：

http://jsfiddle.net/8Cmuf/16/

html:

<div id="dgTabs" style="width: 500px;">
            <ul>
                <li><a id="a1" href="tab-1"> 
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
                <li><a id="a2" href="tab-2">
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
                      <li><a id="a3" href="tab-1"> 
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
                <li><a id="a4" href="tab-2">
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
                    <li><a id="a5" href="tab-1"> 
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
                <li><a id="a6" href="tab-2">
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
                      <li><a id="a7" href="tab-1"> 
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
                <li><a id="a8" href="tab-2">
                    <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
            </ul>
        </div>​
4

1 回答 1

0

我建议不要使用带有 LI 标签的图像，而是尝试使用不同的 CSS 类。

尝试使用此处给出的默认 jQuery UI 代码http://jqueryui.com/tabs/#default

然后在 CSS 中添加了一些可以帮助您的类，请参见下面的代码...

<风格>

    .ui-tabs .ui-tabs-nav li{ 高度：35px; 宽度：42px；}

    .ui-tabs .ui-tabs-nav li.ico1{ background:url(http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png) 不重复；背景位置：-40px 1px；}

    .ui-tabs .ui-tabs-nav li.ico2{ background:url(http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png) 不重复；背景位置：8px 1px；}

    .ui-tabs .ui-tabs-nav li.ico3{ background:url(http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png) 不重复；背景位置：-91px 1px；}

</style>

于 2012-10-31T07:37:53.307 回答