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

试试 jQuery UI 选项卡。

查看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 回答