如何在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/(Link 更新)

现在如何第二级,使它像下面的图片？

两个级别都应滚动.

Answer 1

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

在这里检查你的小提琴的更新。

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

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

更新：

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

根据我们的讨论，这个小提琴可以满足需要。

更新二

正如你所说，脚本将由其他人完成。一个简单的片段就能完成工作。将选择特定行，并且当用户单击它时将保持选中状态...您可以在此处检查此内容

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

_{PS 第二排定位在小提琴盒内无法正常工作。因此，您可能会在单独的页面中进行测试。}