Làm thế nào để làm cho tab di chuyển 2 mức trong CSS như thế này trong HTML 5

Question

tôi cần phải thực hiện các tab như thế này đó là có cuộn ngang và tôi đang sử dụng HTML 5 figure và figure caption dụ

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 } 

see h ere http://jsfiddle.net/jitendravyas/XnAsL/1/(Liên kết được cập nhật)

Bây giờ, làm cách nào để lên cấp 2 và làm giống như hình bên dưới?

Cả hai cấp phải cuộn.

Answer 1

tôi chỉ sử dụng một logic đơn giản nhất tôi có thể nghĩ đến.

Kiểm tra cập nhật fiddle của bạn here.

Tôi vừa sao chép div của bạn, cho họ một lớp chung để biểu thị dưới dạng mục phụ. Sau đó, sử dụng thuộc tính rel trên liên kết gốc để hiển thị các hộp đó.

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

Cập nhật:

Vì bạn muốn có một giải pháp CSS, để biểu thị các mặt hàng phụ cách tốt nhất (hoặc chỉ) là quá tổ họ bên trong. Nhưng mẫu đánh dấu hiện tại của bạn sẽ không cho phép. thành phần nội tuyến sẽ chứa phần tử khối. Mặc dù điều này sẽ có hiệu lực theo HTML5 (tất nhiên là vẫn còn trong giai đoạn thử nghiệm), không hiển thị như mong đợi (trên thực tế div sẽ bật ra khỏi thẻ). Vì vậy, bạn phải thay đổi phong cách đánh dấu để phù hợp với một cái gì đó.

Theo thảo luận của chúng tôi, this fiddle cần những gì cần thiết.

Cập nhật II

Vì bạn nói, kịch bản sẽ được thực hiện bởi người khác. Một đoạn mã đơn giản sẽ nhận được công việc mà công việc đã hoàn thành. Một hàng cụ thể sẽ được lựa chọn và sẽ vẫn chọn khi người dùng nhấp chuột nó ... You can check the fiddle of this here

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

_{T.B. Định vị hàng thứ hai không hoạt động bình thường bên trong hộp của fiddle. Vì vậy, bạn có thể thử nghiệm ở một trang riêng biệt.}