Question

我想在网页上重现这种效果：

http://www.ronnysinc.com/gallery.html

在示例页面上，每当您单击其他选项卡时，您都会在同一窗口中加载一组不同的图像。我认为这是使用CSS和浮动层相互叠加实现的。我不知道如何对这样的项目进行编码，但效果很好。

所以CSS geru，你们中的任何人都可以展示示例代码来实现这种效果吗？

Answer 1

这很简单，你只需要提供标签式布局，例如，受欢迎且众所周知的jQuery UI Tabs。

<强>快速启动

您需要在HTML文档中为jQuery本身，jQuery UI库和CSS jQuery UI主题添加链接（所有这些都附带初始zip包）：

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>

然后你应该激活你的标签：

<script>
  $(function() {
    $("#animals").tabs();
  })
</script>

最后，你可以在网站上欣赏你的标签，这里是3个标签的模式：

<div id="animals">
  <ul>
    <li><a href="#fish">Fish</a></li>
    <li><a href="#birds">Birds</a></li>
    <li><a href="#lizards">Lizards</a></li>
  </ul>
  <div id="fish">
    . . .
    fish content
    . . .
  </div>
  <div id="birds">
    . . .
    bird content
    . . .
  </div>
  <div id="lizards">
    . . .
    lizard content
    . . .
  </div>
</div>

欢迎所有内部div使用你的ccs-floats，图像等等。

此外，您可以浏览网站的源代码以查看技巧和窍门（顺便说一下，我确实在其中嵌入了jQuery。）

如何重现标签效果以堆叠图像？

1 个答案: