css-float - 如何重现堆叠图像的选项卡效果？

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嵌入在那里）。