Question

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

我在这里尝试过一些东西，但目前选择哪个标签并不是很明显：

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>

Answer 1

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

尝试使用此处http://jqueryui.com/tabs/#default

中提供的默认jQuery UI代码

然后在CSS中添加了几个可以帮助你的类，请参阅下面的代码......

＆LT;风格＆GT;

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

.ui-tabs .ui-tabs-nav li.ico1 {background：url（http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png）no -重复;   background-position：-40px 1px; }

.ui-tabs .ui-tabs-nav li.ico2 {background：url（http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png）no -重复; background-position：8px 1px; }

.ui-tabs .ui-tabs-nav li.ico3 {background：url（http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png）no -重复; background-position：-91px 1px; }

＆LT; /风格＆GT;

jquery uitabs与图像

1 个答案: