जावास्क्रिप्ट टैब

| | | | | | | | | | | | | | | | | | | | | | | | |

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

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

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

अपना HTML कोड कॉन्फ़िगर करें:

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


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

< /html>

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

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

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

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

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


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

      1. वास्तव में बटन का चयन करने के लिए, हम .tab [टाइप = `रेडियो`] का उपयोग करें। इसे छिपाने के लिए, हम अद्वितीय प्रदर्शन में डालते हैं।

      इसलिए, हमें वास्तविक सामग्री तक पहुंचना होगा ताकि यह एक समय में केवल एक टैब दिखाए।

      1. div सामग्री का चयन करें और फिर पूर्ण स्थिति को इस पर सेट करें। जब पूर्ण स्थिति निर्धारित की जाती है, तो div को सापेक्ष माता-पिता में सेट किया जा सकता है। ऊपर, दाएं, बाएं और नीचे का उपयोग करके, आप सामग्री को पैरेंट डिव में कहीं भी सेट कर सकते हैं। इस स्थिति में, बाएँ और दाएँ गुण 0 पर सेट करें। हम एक बॉर्डर भी बनाना चाहते हैं और एक गैर-पारदर्शी रंग के लिए एक पृष्ठभूमि रंग सेट करना चाहते हैं।
      1. z को समायोजित करना- चयनित टैब का सूचकांक उस टैब के पैनल को सामने लाएगा। ऐसा करने के लिए, चयनित बटन और उसकी सामग्री का चयन करें। ऐसा करने के लिए, हमें [टाइप = `रेडियो`] का उपयोग करें: चेक किया गया ~ लेबल ~ .content। CSS में तत्वों के बीच "~" हमें बताता है कि हम सामग्री वर्ग चाहते हैं जो एक लेबल तत्व के बाद होता है जो एक चयनित रेडियो बटन के बाद होता है।
        1. सक्रिय टैब प्रदर्शित करने के लिए, सेट [प्रकार = `रेडियो`]: एक अलग पृष्ठभूमि रंग के लिए ~ लेबल की जाँच की।
        2. अब जब उपयोगकर्ता प्रत्येक टैब पर क्लिक करता है, तो वे अन्य पैनल की सामग्री को देखे बिना उनके बीच स्विच करने में सक्षम होना चाहिए काम पर नेविगेशन टैब के लिए यह न्यूनतम आवश्यक है शैली बदलने के लिए सीएसएस के साथ खेलने की कोशिश करें! काम का एक कमीशन कार्य ऊपर - नीचे कोडित है: