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) no-repeat; 背景位置: -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-repeat; 背景位置: 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-repeat; 背景位置: -91px 1px; }

</style>

于 2012-10-31T07:37:53.307 に答える