कभी-कभी, वेब पेज को बिछाते समय, उसमें रखे गए कुछ तत्वों को छिपाना आवश्यक होता है। उदाहरण के लिए, यदि आप चाहते हैं कि विज़िटर प्रपत्र सबमिट बटन को तब तक न देखे, जब तक कि सभी आवश्यक फ़ील्ड भर न जाएं। या यदि बटन का उपयोग आगंतुक द्वारा बिल्कुल भी नहीं किया जाना है, लेकिन इस पृष्ठ पर रखी गई स्क्रिप्ट को इसे "क्लिक" करना चाहिए।
निर्देश
चरण 1
कैस्केडिंग स्टाइल शीट्स (सीएसएस) की डिस्प्ले प्रॉपर्टी का उपयोग वांछित पृष्ठ तत्वों के प्रदर्शन को बंद या प्रदर्शित करने के लिए करें। अंतरराष्ट्रीय मानकों के अनुसार, इस संपत्ति को डेढ़ दर्जन से अधिक मान दिए जा सकते हैं जो विभिन्न प्रदर्शन विधियों को निर्दिष्ट करते हैं। हालांकि, केवल चार क्रॉस-ब्राउज़र हैं (यानी, सभी प्रमुख ब्राउज़रों में काम करते हैं)। इन चारों में से कोई भी मूल्य नहीं है जिसकी आपको आवश्यकता है, जो आपको वांछित पृष्ठ तत्व को छिपाने की अनुमति देता है।
चरण 2
CSS दिशानिर्देशों का आवश्यक सेट बनाएं। अपने सरलतम रूप में, यह इस तरह दिखाई दे सकता है: बटन {डिस्प्ले: कोई नहीं;} इस स्थिति में, पेज… टैग का उपयोग करके सभी बटन प्रदर्शित नहीं करेगा।
चरण 3
यदि आप केवल एक बटन या बटनों के विशिष्ट समूह को छिपाना चाहते हैं, तो निर्देशों में वर्ग के नाम के लिए एक संकेत जोड़ें। उदाहरण के लिए, ऐसे वर्ग को HideBtns नाम दें और इस नाम को CSS स्टेटमेंट में जोड़ें: button. HideBtns {display: none;} पेज के HTML कोड में वांछित बटन में क्लास एट्रिब्यूट जोड़ें और इसे मान HideBtns: छुपा बटन असाइन करें
चरण 4
यदि आप चाहते हैं, उदाहरण के लिए, न केवल बटन को छिपाने के लिए, बल्कि वेब फॉर्म के अन्य तत्वों को भी प्रदर्शित करने के लिए डिस्प्ले प्रॉपर्टी को मूल तत्व के साथ कोई भी मान लागू करें। प्रपत्र और टैग के बीच रखे गए सभी तत्वों का "पैरेंट" माना जाता है। उदाहरण के लिए:
यहां, एक टेक्स्ट फ़ील्ड और दर्ज किए गए मान को सबमिट करने के लिए एक बटन फॉर्म के अंदर रखा गया है। प्रपत्र को HideForm नामक एक वर्ग को सौंपा गया है, इसलिए इनपुट फ़ील्ड और बटन दोनों को छिपाने के लिए, आपको CSS कथन को इस तरह बदलना होगा: form. HideForm {display: none;}
चरण 5
तैयार कोड को ऊपर दिए गए उदाहरण में वेब दस्तावेज़ के शीर्षलेख (और टैग के बीच) में रखें। विज़िटर के ब्राउज़र को यह बताने के लिए कि यह CSS कोड है, इसे HTML शैली टैग के उद्घाटन और समापन के बीच संलग्न होना चाहिए:
button. HideBtns {डिस्प्ले: कोई नहीं;}
