CSS Academy · पाठ

:checked तकनीक बनाम JS वाला टैब घटक

CSS :checked तकनीक से टैब इंटरफ़ेस बनाएँ और उसकी तुलना JavaScript तरीके से करें।

पाठ 4, कुल 4 में से13 चरण

:checked तकनीक बनाम JS वाला टैब घटक, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

टैब घटक की आवश्यकताएँ

टैब घटक में ये चीज़ें आवश्यक हैं: सक्रिय टैब का दृश्य संकेतक, चयन के आधार पर दिखाया या छिपाया जाने वाला संबंधित पैनल, टैबों के बीच कीबोर्ड नेविगेशन और सुलभ ARIA विशेषताएँ। इन्हें केवल CSS की :checked युक्ति से या बेहतर सुलभता के लिए JavaScript से प्राप्त किया जा सकता है।

चयनित अवस्था की युक्ति

छिपे हुए रेडियो इनपुट अवस्था का काम करते हैं: प्रत्येक टैब एक रेडियो इनपुट से जुड़े <label> के रूप में होता है। रेडियो के चयनित होने पर CSS के सहोदर संयोजक संबंधित पैनल को दिखाते हैं और सक्रिय टैब लेबल की शैली बदलते हैं। JavaScript की बिल्कुल आवश्यकता नहीं होती।

<div class="tabs">
  <input type="radio" name="tabs" id="tab-1" checked hidden />
  <label for="tab-1">Tab One</label>
  <div id="panel-1">Panel one content</div>
</div>

:checked CSS संरचना

रेडियो इनपुट रखें, फिर सभी लेबल (टैब), और उसके बाद उसी कंटेनर में सभी पैनल रखें। चयनित रेडियो को उसके संबंधित पैनल से जोड़ने के लिए सामान्य सहोदर संयोजक (~) का उपयोग करें। पैनल का डिफ़ॉल्ट मान display: none रखें; संबंधित पैनल को display: block दें।

:checked पद्धति की सीमाएँ

:checked युक्ति ARIA विशेषताओं (aria-selected, aria-controls) को अपडेट नहीं कर सकती, टैबों के बीच तीर कुंजी नेविगेशन सक्षम नहीं कर सकती, और DOM क्रम की बाधाएँ (इनपुट पैनल से पहले होने चाहिए) दृश्य डिज़ाइन की आवश्यकताओं से टकरा सकती हैं। ये कमियाँ वास्तविक सुलभता को सीमित करती हैं।

JavaScript टैब घटक

JavaScript टैब घटक टैब बटनों पर क्लिक घटनाओं को सुनता है, सक्रिय टैब पर aria-selected सेट करता है, पैनलों पर aria-hidden अपडेट करता है और फ़ोकस का प्रबंधन करता है। यह पद्धति ARIA Authoring Practices के अनुसार पूर्ण ARIA अनुपालन और कीबोर्ड अंतःक्रिया प्रतिरूप सक्षम करती है।

टैब के लिए ARIA भूमिकाएँ

कंटेनर पर role="tablist", प्रत्येक टैब बटन पर role="tab" के साथ aria-selected और aria-controls, तथा प्रत्येक पैनल पर role="tabpanel" के साथ aria-labelledby का उपयोग करें। स्क्रीन रीडर टैबों की संख्या, स्थिति और चयनित अवस्था की घोषणा करते हैं।

कीबोर्ड अंतःक्रिया प्रतिरूप

टैबों के लिए ARIA Authoring Practices इस प्रकार हैं: Tab कुंजी टैब सूची में प्रवेश करके सक्रिय टैब पर फ़ोकस करती है। बायाँ या दायाँ तीर टैबों के बीच ले जाता है। Home या End पहली या अंतिम टैब पर ले जाते हैं। प्रत्येक तीर कुंजी से होने वाली गति फ़ोकस किए गए टैब को सक्रिय करती है (स्वचालित सक्रियण प्रतिरूप)।

सक्रिय अवस्था के लिए CSS

[aria-selected="true"] चयनकर्ता से सक्रिय टैब पर निचली बॉर्डर या बदली हुई पृष्ठभूमि लगाएँ—यह JavaScript और :checked, दोनों पद्धतियों के साथ काम करता है। इससे CSS, ARIA अवस्था विशेषता के अनुरूप बना रहता है और दोहरी अवस्था प्रबंधन से बचा जा सकता है।

<div role="tablist">
  <button role="tab" aria-selected="true">Overview</button>
  <button role="tab" aria-selected="false">Details</button>
</div>

गतिशील सूचक

गतिशील टैब सूचक टैबों के बीच खिसकता है: पूर्ण स्थिति वाले सूचक तत्व को रखें, सक्रिय टैब के आकार से मिलाने के लिए उसका बायाँ स्थान और चौड़ाई निर्धारित करने हेतु JavaScript का उपयोग करें, और transition: left 200ms ease, width 200ms ease से उसे गतिशील करें।

अनुकूली टैब अतिप्रवाह

जब छोटी स्क्रीन पर टैब अपने कंटेनर से बाहर निकलने लगें, तो क्षैतिज स्क्रॉलिंग (overflow-x: auto; scrollbar-width: none) का उपयोग करें या मोबाइल पर उन्हें चयन ड्रॉपडाउन में समेट दें। चयन वाला तरीका मूल चयन नियंत्रण को टैब पैनल की दृश्यता के साथ समन्वयित करने के लिए JS पर निर्भर करता है।

केवल CSS बनाम JS: प्रत्येक का उपयोग कब करें

जहाँ सुगम्यता प्राथमिक आवश्यकता न हो, वहाँ सरल और गैर-महत्वपूर्ण उपयोगकर्ता इंटरफ़ेस के लिए :checked तरकीब का उपयोग करें। कीबोर्ड उपयोगकर्ताओं, स्क्रीन-पाठक उपयोगकर्ताओं या उन अनुप्रयोगों के लिए जो जाँचों अथवा कानूनी आवश्यकताओं में ARIA अनुपालन चाहते हैं, वास्तविक उपयोग के इंटरफ़ेस में JavaScript टैब का उपयोग करें।

ज्ञान-जाँच

टैब के लिए CSS की :checked तरकीब की मुख्य सुगम्यता सीमा क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

:checked तरकीब रेडियो इनपुट और सहोदर संयोजकों का उपयोग करके केवल CSS से टैब बदलती है, लेकिन इसमें ARIA और कीबोर्ड सुगम्यता का अभाव होता है। ARIA भूमिकाओं (टैब-सूची, टैब, टैब-पैनल), aria-selected स्थिति के प्रबंधन और तीर-कुंजी संचालन वाले JavaScript टैब वास्तविक उपयोग के घटकों के लिए आवश्यक संपूर्ण, सुगम अनुभव प्रदान करते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ :checked तकनीक बनाम JS वाला टैब घटक” पाठ निःशुल्क है?

हाँ—“ :checked तकनीक बनाम JS वाला टैब घटक” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“ :checked तकनीक बनाम JS वाला टैब घटक” में मैं क्या सीखूँगा?

CSS :checked तकनीक से टैब इंटरफ़ेस बनाएँ और उसकी तुलना JavaScript तरीके से करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“ :checked तकनीक बनाम JS वाला टैब घटक” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ