के बारे में बात करें: जाँच की गई

हाल ही में, यह महसूस किया गया है कि बहुत से लोग CSS में टैब (टैब) बनाने के बारे में लिखते हैं।
अब मैं सीएसएस में टैब बनाने के लिए एक और तरीके के बारे में बात करना चाहता हूं (मेरी दिशा में चेतावनी के हमले, मैं उस के बिना उल्लेख करूंगा: लक्ष्य)।

लेकिन पहले बातें पहले।

: जाँच या थोड़ा सिद्धांत

तो, CSS3 में ( css3- चयनकर्ताओं मॉड्यूल में) एक नया छद्म- वर्ग प्रकट हुआ: जाँच की गई।
संक्षेप में, इस छद्म वर्ग को उन इनपुट्स (चेकबॉक्स या रेडियोबूटन) पर लागू किया जाता है जो उपयोगकर्ता द्वारा चेक किए गए राज्य में सेट किए जाते हैं।

टैब, टैब, टैब

टैब के कुछ कार्यान्वयन का वर्णन किया गया था (उदाहरण के लिए, यहां इनपुट प्रकार = "पाठ" फ़ील्ड को आसानी से सेट किया गया था) के माध्यम से किया गया था , लेकिन अधिकांश भाग के लिए वे छद्म श्रेणी: लक्ष्य पर निर्भर थे, जिसका उपयोग "कूद" सामग्री के कारण थोड़ा अनुचित है।

किस वजह से, टैब के एक अल्ट्रा-सरल कार्यान्वयन का उपयोग करके आविष्कार किया गया था: जाँच की गई और रेडियो बटन।

कोड के साथ रीडर को अधिभार नहीं देने के लिए, मैंने 4 टैब से 2 तक का उदाहरण काट दिया, एक पूर्ण उदाहरण यहां उपलब्ध है

HTML:

<section> <input type="radio" id="tab1" name="radiobutton" checked="checked"/> <label for="tab1" class="tabs">qutIM 0.1</label> <input type="radio" id="tab2" name="radiobutton"/> <label for="tab2" class="tabs">qutIM 0.2</label> <article> qutIM 0.1 —  ,   2008 . </article> <article> qutIM 0.2 —  ,   2010 . </article> </section> 

सीएसएस:

 input { display: none; } input:checked + label { background: #CCC; } input:checked + label + input + label + article { /* ? */ display: block; } input:checked + label + article + article { display: block; } article { display: none; } 

यह कोड सभी अनावश्यक शैलियों से रहित है, ताकि समझ में हस्तक्षेप न हो।
अलग से, मैं यह कहना चाहता हूं कि यह CSS और HTML का उपयोग करके क्या किया जा सकता है, इसका सिर्फ एक उदाहरण है, क्योंकि वास्तविक साइटों में इसका उपयोग करना मुश्किल है और इसलिए:
यह कोड फ़ायरफ़ॉक्स, ओपेरा, IE9 + में सही तरीके से काम करता है, लेकिन वेबकिट-ब्राउज़र में काम नहीं करता है। और यहाँ मैं थोड़ा जल्दबाजी में था।
कोड बदलने से पहले WebKit मान को अद्यतन नहीं करता है, लेकिन आप इसे बहुत गंदे हैक जोड़कर ऐसा करने के लिए बाध्य कर सकते हैं:

 section { -webkit-animation: 0.1s hack infinite; } @-webkit-keyframes hack { from {margin: 0; padding: 0;} to {margin: 0; padding: 0;} } 

एक एनीमेशन जो कुछ भी नहीं करता है। वेबकिट कभी भी विस्मित करना बंद नहीं करता है।

जैसा कि आपने देखा, मैंने बार-बार अगले तत्व की चयनकर्ता संपत्ति का उपयोग किया है, जो सामान्य रूप से प्रदर्शन कारणों से उपयोग करने के लिए अनुशंसित नहीं है। लेकिन थोड़ा कम मैं इस चयनकर्ता का ऐसा उपयोग दिखाऊंगा जिसका मैंने कभी सपना नहीं देखा था।

थोडा प्रलाप

लेकिन क्या होगा अगर आप बाइनरी नंबर दर्ज करने के लिए चेकबॉक्स का उपयोग करते हैं?

हम दो चेकबॉक्स लेते हैं, उन्हें क्रमिक रूप से व्यवस्थित करते हैं और कुछ ऐसा करते हैं:

 input + div::after { content: "0"; } input:checked + div::after { content: "1"; } input:checked + input + div::after { content: "2"; } input:checked + input:checked + div::after { content: "3"; } 

ब्रैड? पागलपन? Trolleybus.jpg? वास्तव में, बस एक प्रदर्शन और कुछ खाली समय।
वैसे, आधे घंटे में इस तरह की एक छोटी सी स्क्रिप्ट लिखी गई थी जो बाइनरी से दशमलव में अनुवाद करने के लिए एक शैली (ऊपर के समान) और चेकबॉक्स से एक पंक्ति उत्पन्न हुई :)
थोड़ी देर बाद, एक समान स्क्रिप्ट लिखी गई जो एक समान शैली उत्पन्न करती है, लेकिन अनुवाद से त्रैमासिक से दशमलव संख्या के लिए।
HTML में त्रि-राज्य चेकबॉक्स हैं, लेकिन उन्हें बनाने के लिए जावास्क्रिप्ट की आवश्यकता होती है (तत्व को अनिश्चित अनिश्चित = सच को उजागर करने के लिए), और एक छद्म-वर्ग भी है: अनिश्चित समान: चेक किया गया।

बेशक, इस पद्धति का उपयोग करने के लिए यह सवाल कहीं बाहर है। यह सब विचार के लिए जानकारी के रूप में दिया गया है।

और भी?

यहां आप एक ही सिद्धांत के आधार पर ड्रॉप-डाउन मेनू के बारे में किजू द्वारा नोट पढ़ सकते हैं।