Question

我正在寻找一个标签式导航菜单，其中包含图片作为标签。所以我有这样的事情：

   <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但我找不到一个能为包含图像的标签提供一个很好的风格？

Answer 1

尝试使用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>

图片大小应适合您的标签。

希望你能理解...... :)。

寻找标签式导航菜单风格？

1 个答案: