कैसे HTML में इस तरह सीएसएस में 2 स्तर स्क्रॉल टैब बनाने के लिए 5

Question

मैं इस तरह टैब्स जो क्षैतिज स्क्रॉल चल रहा है बनाने के लिए और मैं एचटीएमएल 5 figure और figure शीर्षक

एचटीएमएल उदाहरण

उपयोग कर रहा हूँ की जरूरत है

<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> 

सीएसएस

.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 } 

देखने ज ere http://jsfiddle.net/jitendravyas/XnAsL/1/(लिंक अपडेट किया गया)

अब दूसरे स्तर पर कैसे करें और इसे नीचे की तस्वीर की तरह बनाएं?

दोनों स्तरों को स्क्रॉल करना चाहिए।

Answer 1

मैं सिर्फ एक सरल तर्क मैं के बारे में सोच सकता है इस्तेमाल किया।

अपने पहेली here के अपडेट की जांच करें।

मैंने अभी आपके div की प्रतिलिपि बनाई है, उन्हें उप आइटम के रूप में इंगित करने के लिए एक सामान्य श्रेणी दी है। फिर उन बक्से को दिखाने के लिए मूल लिंक पर एक रिला विशेषता का उपयोग किया।

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

अद्यतन:

चूंकि आप एक सीएसएस समाधान चाहते हैं, आदेश उप आइटम निरूपित करने के लिए सबसे अच्छा (या केवल) रास्ते में भी उन्हें अंदर घोंसला है। लेकिन आपका वर्तमान मार्कअप पैटर्न, इसे अनुमति नहीं देगा। एक इनलाइन तत्व के रूप में एक ब्लॉक तत्व होगा। हालांकि यह एचटीएमएल 5 के तहत मान्य होगा (जो निश्चित रूप से प्रयोगात्मक चरण में है), उम्मीद के अनुसार प्रस्तुत नहीं करता है (वास्तव में div टैग से बाहर पॉप होगा)। तो आपको मार्कअप शैली को कुछ फिट में बदलना होगा।

हमारी चर्चा के अनुसार, this fiddle आवश्यक है जो करता है।

अद्यतन द्वितीय

जब से तुम ने कहा, पटकथा किसी और के द्वारा किया जाएगा। एक साधारण स्निपेट को नौकरी मिल जाएगी। एक विशेष पंक्ति का चयन किया जाएगा और जब उपयोगकर्ता उस पर क्लिक चयनित बने होगा ... You can check the fiddle of this here

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

_{पी.एस. दूसरी पंक्ति स्थिति फ़िल्ड के बॉक्स के अंदर ठीक से काम नहीं कर रही है। तो आप एक अलग पृष्ठ में परीक्षण हो सकता है।}