जावास्क्रिप्ट का उपयोग किए बिना सीएसएस में टैब बनाना

एक आसान-से-नेविगेट स्थान पर संबंधित जानकारी प्रदर्शित करने में CSS Tabs वास्तव में बहुत अच्छे हैं। वे अनिवार्य रूप से टैब्ड डिवाइडर की तरह दिखते हैं जिन्हें आप रेसिपी बॉक्स या बाइंडर में देखेंगे। टैब्ड नेविगेशन का उपयोग करने वाली वेबसाइटों के कुछ उदाहरण यहां दिए गए हैं:

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

जैसा कि आप इन दो साइटों का निरीक्षण करते हैं, इस बारे में सोचें कि साइटों पर ऐसे UI घटक का उपयोग करने के क्या लाभ हैं। यह किन समस्याओं का समाधान करता है? टैब्ड नेविगेशन किस प्रकार की जानकारी के लिए एक अच्छा कार्यान्वयन होगा?

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

अपना HTML सेटअप करें:

आगे बढ़ो और अपने बॉयलरप्लेट एचटीएमएल को शरीर के अंदर एक कंटेनर के साथ सेट करें जो परियोजना के लिए हमारे मुख्य कंटेनर के रूप में काम करेगा। आप इसे क्लास एट्रिब्यूट में जो चाहें कॉल कर सकते हैं, लेकिन मैं इसे class=”tabs” कहूंगा . अब तक, आपका HTML इस तरह दिखना चाहिए:

   <शीर्षक>सीएसएस टैब <शैली> /* अभी तक प्रदर्शित करने के लिए कोई सीएसएस नहीं है */

“tabs” <div> . के अंदर , हम और चार

s सम्मिलित करेंगे और प्रत्येक को tab . के वर्ग के साथ कॉल करेंगे . यह उन चार टैबों में से प्रत्येक का प्रतिनिधित्व करता है जिन्हें हम आज लिखेंगे। इसमें हमारा इनपुट, टैब लेबल और टैब सामग्री शामिल होगी। आइए उन सभी के लिए खाली कंटेनर बनाएं:

<शीर्षक>सीएसएस टैब <शैली> /* अभी तक प्रदर्शित करने के लिए कोई सीएसएस नहीं है */

/* यह कार्रवाई में हमारी योजना है*//*इनपुट */ <इनपुट प्रकार ="रेडियो" आईडी ="टैब -1" नाम ="टैब-समूह -1" चेक किया गया/> / * इनपुट के लिए लेबल */ for="tab-1">लेबल 1 /* सामग्री */

हमारी सामग्री यहां जाएगी

<इनपुट type="radio" id="tab-2" name="tab-group-1" check/> <लेबल for="tab-2">लेबल 2

हमारा सामग्री यहां जाएगी

इन दोनों को स्वयं आजमाएं! अपनी कक्षा के नाम और आईडी के लिए ऊपर दिए गए सम्मेलन का पालन करें - मैं एक एचपी थीम का उपयोग कर रहा हूं, लेकिन आप जो चाहें उन्हें नाम दें!

<शरीर>

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

सीएसएस शुरू करने का समय:

जब सीएसएस लिखने की बात आती है, तो सबसे बड़े कंटेनर से शुरू करें और सबसे छोटे कंटेनर पर अपना काम करें। यहां वह न्यूनतम है जो हमें इसे काम करने के लिए करने की आवश्यकता है:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

वाइल्ड कार्ड चयनकर्ता को बॉक्स-साइज़िंग:बॉर्डर-बॉक्स पर सेट करें।
मुख्य कंटेनर पर, हमें डिस्प्ले प्रॉपर्टी को फ्लेक्स पर सेट करना होगा और स्थिति को रिलेटिव पर सेट करना होगा। प्रदर्शन:फ्लेक्स टैब को एक दूसरे के बगल में एक पंक्ति में रखने की अनुमति देता है और सापेक्ष स्थिति मूल रूप से एक सीमा या बाड़ के रूप में कार्य करती है जिसमें टैब की सामग्री होती है।

इस बिंदु पर आप देखेंगे कि रेडियो बटन और कुछ सामग्री के साथ टेक्स्ट के चार ब्लॉक क्या दिखते हैं। आगे हमें चेक किए गए ब्लॉक को दिखाने और अन्य ब्लॉकों को छिपाने का तरीका निकालना होगा।

.tab कंटेनर पर, हम लेबल के लिए स्टाइल सेट करेंगे:
1. किसी भी रंग में 1px ठोस बॉर्डर जो आप चाहते हैं।
2. पैडिंग:5px, 10px - लेबल टेक्स्ट के आसपास कुछ जगह जोड़ देगा
3. बॉर्डर-त्रिज्या 10px, 10px, 0px, 0px - यह लेबल को पारंपरिक टैब की तरह बना देगा।

यदि आप अभी अपने काम की जांच करते हैं, तो आप देखेंगे कि लेबल के बाईं ओर गोलाकार रेडियो बटन हैं। तो यह एक पारंपरिक टैब की तरह दिखता है, लेकिन फिर भी बटन की जांच की गई विशेषता को बनाए रखने के लिए, हमें रेडियो बटन के गोलाकार हिस्से को छिपाने की जरूरत है।

वास्तव में बटन का चयन करने के लिए, हम .tab [type='radio'] का उपयोग करते हैं। इसे छिपाने के लिए, हमने डिस्प्ले को कोई नहीं पर सेट किया है।

अगला, हमें वास्तविक सामग्री से निपटने की आवश्यकता है ताकि यह एक समय में केवल एक टैब दिखाए।

सामग्री div का चयन करें और फिर स्थिति को पूर्ण पर सेट करें। जब पूर्ण स्थिति निर्धारित की जाती है, तो div को सापेक्ष माता-पिता के अंदर कहीं भी सेट किया जा सकता है। ऊपर, दाएं, बाएं और नीचे का उपयोग करके, आप उस सामग्री को सेट कर सकते हैं जहां आप पैरेंट डिव के अंदर चाहते हैं। इस स्थिति में, बाएँ और दाएँ गुण 0 पर सेट करें। हम एक सीमा भी बनाना चाहते हैं और एक गैर-पारदर्शी रंग के लिए पृष्ठभूमि का रंग सेट करना चाहते हैं।

चयनित टैब का z-index सेट करने से उस टैब का पैनल शीर्ष पर आ जाएगा। ऐसा करने के लिए, चेक किए गए बटन और उसकी सामग्री का चयन करें। ऐसा करने के लिए हम [type='radio']:checked ~ label ~ .content का उपयोग करते हैं। CSS में तत्वों के बीच में "~" हमें बताता है कि हम सामग्री वर्ग चाहते हैं जो एक लेबल तत्व के बाद होता है जो एक चेक किए गए रेडियो बटन के बाद होता है।

यह दिखाने के लिए कि कौन सा टैब सक्रिय है, [type='radio']:checked ~ लेबल को किसी भिन्न पृष्ठभूमि रंग पर सेट करें।

अब जब उपयोगकर्ता प्रत्येक टैब पर क्लिक करता है, तो वे दूसरे पैनल की सामग्री को देखे बिना सफलतापूर्वक एक से दूसरे में जाने में सक्षम होना चाहिए। काम करने के लिए टैब्ड नेविगेशन प्राप्त करने के लिए आपको यह न्यूनतम आवश्यकता है। स्टाइल बदलने के लिए CSS के साथ खेलने की कोशिश करें! एक कार्यशील कार्यान्वयन नीचे कोडित किया गया है:

   <शीर्षक>सीएसएस टैब्स <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; } बॉडी { फॉन्ट-फ़ैमिली:'रोबोटो'; } .टैब {अधिकतम-चौड़ाई:700px; न्यूनतम ऊंचाई:100px; मार्जिन:25px 0; चौड़ाई:100%; प्रदर्शन:फ्लेक्स; /* टैब को एक दूसरे के बगल में रहने की अनुमति देता है */ स्थिति:सापेक्ष; /* यहाँ रिश्तेदार में सामग्री की चौड़ाई शामिल है */ } .tab लेबल { पैडिंग:5px 10px; सीमा:1px ठोस #ccc; कर्सर:सूचक; सीमा-त्रिज्या:10px 10px 0 0; } .tab [प्रकार ='रेडियो'] {प्रदर्शन:कोई नहीं; /* इससे रेडियो बटन गायब हो जाते हैं - हम केवल ट्रैक कर रहे हैं अगर वे चेक किए गए हैं या नहीं */ } h3 { मार्जिन:10px 40px; } उल { सूची-शैली-प्रकार:कोई नहीं; } .सामग्री { पैडिंग:10px; सीमा-त्रिज्या:0px 10px 10px 10px; स्थिति:निरपेक्ष; बाएं:0; दाएं:0; पृष्ठभूमि:सफेद; सीमा:1px ठोस #ccc; /* 0 पर बाएँ और दाएँ टैब को एक-दूसरे को ओवरलैप करने में मदद करते हैं */ } /* यह चयनित टैब को शीर्ष पर रहने देता है */ [type='radio']:checked ~ label ~ .content { z-index:1; } [प्रकार ="रेडियो"]:चेक किया गया ~ लेबल {पृष्ठभूमि:लाइटग्रे; } /* टैब के लिए रंग योजना */ [टाइप ='रेडियो']:चेक किया गया ~ #gryffindor { बैकग्राउंड:#ec9086; रंग:#241806; } [प्रकार ='रेडियो']:चेक किया गया ~ # रेवेनक्ला {पृष्ठभूमि:#3054ca; रंग:#241806; } [प्रकार ='रेडियो']:चेक किया गया ~ #slytherin {पृष्ठभूमि:#089714; रंग:#252525; } [टाइप ='रेडियो']:चेक किया गया ~ #hufflepuff { बैकग्राउंड:#f0d695; रंग:#372e29; } [प्रकार ='रेडियो'] ~ #स्लीथेरिन {पृष्ठभूमि:#033807; रंग:#आआआ; } [प्रकार='रेडियो'] ~ #हफलपफ {पृष्ठभूमि:#f0c75e; रंग:#372e29; } [प्रकार ='रेडियो'] ~ #gryffindor {पृष्ठभूमि:#9c1203; रंग:#e3a000; } [प्रकार ='रेडियो'] ~ # रेवेनक्ला {पृष्ठभूमि:#0e1a40; रंग:#946b2d; } .gryffindor {पृष्ठभूमि:#9c1203; रंग:#e3a000; } .slytherin {पृष्ठभूमि:#033807; रंग:#आआआ; } .hufflepuff { पृष्ठभूमि:#f0c75e; रंग:#372e29; } .रेवेनक्लाव {पृष्ठभूमि:#0e1a40; रंग:#946b2d; }     <लेबल आईडी ="gryffindor" for="tab-1">Gryffindor  Gryffindor में HP Chars
  हैरी पॉटर
 हर्मियोन ग्रिंगर
 रॉन वीसली
 एल्बस डंबलडोर
 केटी बेल
 नेविल लॉन्गबॉटम
 
 
 
   <लेबल id="slytherin" for="tab-2">Slytherin  Slytherin में HP Chars
  ड्रेको मालफॉय
 नार्क इसा ब्लैक
 लुसियस मालफॉय
 सेवेरस स्नेप
 टॉम पहेली
 डोलोरेस अम्ब्रिज
 
 
 
   <लेबल for="tab-3" id="ravenclaw" ">रेवेनक्ला  रेवेनक्लाव में HP चार्स
  लिसा टर्पिन
 लूना लवगूड
 गिल्डेरॉय लॉकहार्ट
 गैरिक ओलिवेंडर
 पद्मा पाटिल
 सिबिल ट्रेलावनी
 
 
 
    हफ़लपफ़  हफलपफ में एचपी चार्स
  सेड्रिक डिगरी
 न्यूटन स्कैमैंडर
 निम्फाडोरा टोंक्स
 पोमोना स्प्राउट
 सुसान बोन्स
 टेडी ल्यूपिन