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