सीएसएस के साथ सामग्री छिपाना और दिखाना: जावास्क्रिप्ट के बिना एक चाल

वेब विकास के साथ काम करते समय, सामग्री की दृश्यता को नियंत्रित करना अक्सर आवश्यक होता है। परंपरागत रूप से, यह जावास्क्रिप्ट का उपयोग करके हासिल किया जाता है, लेकिन सीएसएस का उपयोग सुरुचिपूर्ण छिपाने और प्रभाव दिखाने के लिए भी किया जा सकता है। ऐसी ही एक तकनीक का वर्णन नीचे किया गया है, जो पिछले दृष्टिकोणों के साथ आई एक विशिष्ट चुनौती को संबोधित करती है। उपयोगकर्ताओं को आइटमों की सूची छिपाने और दिखाने की अनुमति देता है। निम्नलिखित स्निपेट इस कार्यक्षमता को प्रदर्शित करता है:

#cont { कुछ भी डिस्प्ले मत करो; } .दिखाएँ: फोकस .छिपाएँ { प्रदर्शन: इनलाइन; } .दिखाएँ:फ़ोकस .छिपाएँ #जारी रखें { प्रदर्शन: ब्लॉक; }

चुनौती:

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

समाधान:

इस समस्या के समाधान के लिए, निम्नलिखित संशोधित सीएसएस और HTML कोड का उपयोग किया जा सकता है:

CSS:

HTML:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

यहां कुछ चौंकाने वाली जानकारी

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