0

タブアイテムとして画像に対応するタブ付きナビゲーションメニューを探しています。だから私はこのようなものを持っています：

   <div class="menu">

            <a href="#">
                    <img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
            </a>
            <a href="#">
                    <img src="images/Desert.jpg" style="width:10%; height:10%"  title="Desert" />
            </a>
            <a href="#">
                    <img src="images/Hydrangeas.jpg" style="width:10%; height:10%"  title="Hydrangeas"/>
            </a>
            <a href="#">
                    <img src="images/Jellyfish.jpg" style="width:10%; height:10%"  title="Jellyfish" />
            </a>
            <a href="#">
                    <img src="images/Penguins.jpg" style="width:10%; height:10%"  title="Penguins" />
            </a>


        </div>

いくつかのjquery/cssを試しましたが、画像を含むタブに適したスタイルを提供するものが見つかりませんか？

4

1 に答える 1

0

jQueryUIタブを試してください。

http://jqueryui.com/demos/tabs/#defaultでコードをチェックアウトします

デモのナビゲーションアイテムを置き換えます。つまり、

<ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>
  <li><a href="#tabs-2">Proin dolor</a></li>
  <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>

あなたのコンテンツで、のように...

<ul>
  <li>
    <a href="#"><img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" /></a>
  </li>
  <li>
    <a href="#"><img src="images/Desert.jpg" style="width:10%; height:10%"  title="Desert" /></a>
  </li>
  <li>
    <a href="#"><img src="images/Hydrangeas.jpg" style="width:10%; height:10%"  title="Hydrangeas"/></a>
  </li>
  <li>
    <a href="#"><img src="images/Jellyfish.jpg" style="width:10%; height:10%"  title="Jellyfish" /></a>
  </li>
  <li>
    <a href="#"><img src="images/Penguins.jpg" style="width:10%; height:10%"  title="Penguins" /></a>
  </li>
</ul>

画像のサイズはタブに適している必要があります。

あなたが理解することを願って... ：）

于 2012-10-08T05:20:17.537 に答える