jquery uitabs与图像

Question

如何在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>​ 

Answer 1

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

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

然后在CSS，这将帮助你，看下面的代码添加几班...

<风格>

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

   的.ui的选项卡的.ui袢-NAV li.ico1 {背景：网址（http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons .png）不重复; 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）不重复; background-position：8px 1px; }

   的.ui的选项卡的.ui袢-NAV li.ico3 {背景：网址（http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons .png）不重复; background-position：-91px 1px; }

< /风格>