html - 如何在 HTML 5 中像这样在 CSS 中制作 2 级滚动选项卡

Question

我需要制作像这样具有水平滚动的标签，我正在使用 HTML 5 figure 和 figure 标题

HTML 示例

<div class="footernav">
  <a href="javascript:void(0)">
    <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
        <figcaption>
                <h3>Product Name</h3>
        </figcaption>
    </figure>
  </a>
</div>

CSS

.footernav {white-space;no-wrap; padding-top: 0.2%; border-top: 1px solid white; overflow: auto; white-space:nowrap; padding-bottom: 1.9%;}
.footernav a { text-decoration: none; font-weight: bold; display: inline-block; padding-right: 1.5%; padding-left: 1.5%; text-align: center; margin-top: 1.1em; overflow:hidden; }
.footernav figure:last-child { margin-right: 0; }
.footernav img { min-width: 118px; max-width: 118px; padding:3px;  }
figure{margin:0}
.footernav a:hover,
.footernav a.selected { border-top-left-radius: 15px;
border-top-right-radius: 15px; background:red}
.footernav h3 { color: #000; font-weight: 700; margin-top: 0; margin-bottom: 0.3em; font-size: 1.1em; text-transform: uppercase; margin-top:0.5em }

看这里http://jsfiddle.net/jitendravyas/XnAsL/1/ (链接已更新)

现在如何进入第 2 层并使其像下图一样？

两个级别都应该滚动。

Answer 1

我只是使用了我能想到的最简单的逻辑。

检查 fiddle 的更新here .

我刚刚复制了你的 div，给了他们一个公共(public)类来表示子元素。然后在原始链接上使用 rel 属性来显示这些框。

$(".link").click(function() {
    var rel = $(this).attr('rel');
    $(".subtabs").hide();
    $("#"+rel).show();
});

更新:

既然你想要一个 CSS 解决方案，为了表示子项，最好(或唯一)的方法就是将它们嵌套在里面。但是您当前的标记模式不允许这样做。因为内联元素将包含 block 元素。虽然这在 HTML5 下有效(当然仍处于实验阶段)，但不会按预期呈现(事实上 div 会从标签中弹出)。因此，您必须将标记样式更改为合适的样式。

根据我们的讨论，this fiddle做需要做的事。

更新二

既然你说了，脚本将由其他人完成。一个简单的片段将完成工作。特定行将被选中，并在用户单击它时保持选中状态... You can check the fiddle of this here

$(".footernav > li").click(function() {
    $(this).toggleClass("selected");
});

<子>附言第二排定位在 fiddle 盒内无法正常工作。因此，您可能在单独的页面中进行了测试。