टेक्स्ट के छिपे हुए ब्लॉक रखने से वेबसाइट पेज की दृश्य धारणा में सुधार होता है - यह ब्राउज़र में ठीक उसी तरह लोड होता है जैसे डिज़ाइनर ने इसे डिज़ाइन किया था, भले ही पोस्ट की गई जानकारी की मात्रा कुछ भी हो। इसके अलावा, यह आगंतुक के लिए अधिक सुविधाजनक है - सूचना के आवश्यक ब्लॉक की तलाश में, उसे पूरे सरणी को देखने की ज़रूरत नहीं है, लेकिन केवल "हिमखंडों की युक्तियां" हैं।
यह आवश्यक है
एचटीएमएल और जावास्क्रिप्ट का बुनियादी ज्ञान।
अनुदेश
चरण 1
HTML पेज में टेक्स्ट के वांछित ब्लॉक को छिपाने और प्रदर्शित करने के लिए एक कस्टम जावास्क्रिप्ट फ़ंक्शन का उपयोग करें। सभी ब्लॉकों के लिए एक सामान्य कार्य उनमें से प्रत्येक में अलग से कोड जोड़ने की तुलना में कहीं अधिक सुविधाजनक है। पृष्ठ के स्रोत कोड के शीर्ष लेख में, उद्घाटन और समापन स्क्रिप्ट टैग रखें, और उनके बीच एक नाम के साथ एक खाली फ़ंक्शन बनाएं, उदाहरण के लिए, स्वैप और एक आवश्यक इनपुट पैरामीटर आईडी: फ़ंक्शन स्वैप (आईडी) {}
चरण दो
फ़ंक्शन के मुख्य भाग में घुंघराले ब्रेसिज़ के बीच JavaScript कोड की दो पंक्तियाँ जोड़ें। पहली पंक्ति को टेक्स्ट के ब्लॉक की वर्तमान स्थिति को पढ़ना चाहिए - चाहे इसकी दृश्यता चालू हो या बंद। दस्तावेज़ में ऐसे कई ब्लॉक हो सकते हैं, इसलिए प्रत्येक का अपना पहचानकर्ता होना चाहिए - यह उसका कार्य है जो आईडी को एकमात्र इनपुट पैरामीटर के रूप में प्राप्त करता है। इस पहचानकर्ता का उपयोग करते हुए, यह दस्तावेज़ में आवश्यक ब्लॉक की खोज करता है, sDisplay चर के लिए दृश्यता / अदृश्यता मान (प्रदर्शन संपत्ति की स्थिति) निर्दिष्ट करता है: sDisplay = document.getElementById (id).style.display;
चरण 3
दूसरी पंक्ति को टेक्स्ट के वांछित ब्लॉक की डिस्प्ले प्रॉपर्टी को विपरीत में बदलना चाहिए - यदि टेक्स्ट दिखाई दे रहा है तो छुपाएं, और दिखाएं कि यह छुपा हुआ है या नहीं। यह निम्नलिखित कोड के साथ किया जा सकता है: document.getElementById (id).style.display = sDisplay == 'none'? '': 'कोई नहीं';
चरण 4
हेडर सेक्शन में निम्नलिखित स्टाइलशीट जोड़ें: एक {कर्सर: पॉइंटर} जब आप अपूर्ण लिंक टैग पर होवर करते हैं तो आपको माउस पॉइंटर को सही ढंग से प्रदर्शित करने के लिए इसकी आवश्यकता होगी। ऐसे लिंक्स की मदद से आप पेज में टेक्स्ट ब्लॉक्स की दृश्यता/अदृश्यता को टॉगल करने की व्यवस्था करते हैं।
चरण 5
इन टॉगल लिंक को प्रत्येक छिपे हुए ब्लॉक से पहले टेक्स्ट में रखें, और टेक्स्ट के अंत में ब्लॉक में एक समान लिंक जोड़ें। स्पैन टैग में अदृश्य टेक्स्ट संलग्न करें जिनकी शैली विशेषताओं में अदृश्यता सेट है। उदाहरण के लिए: टेक्स्ट को एक्सपैंड करें +++ यह हिडन टेक्स्ट है --- इस उदाहरण में, थ्री प्लस लिंक पर क्लिक करने से उपरोक्त फंक्शन ऑनक्लिक इवेंट पर कॉल करेगा, इसे पास करने वाले ब्लॉक की आईडी दिखाई देगी। और ब्लॉक के अंदर समान कार्यों के साथ तीन minuses का एक लिंक है - उस पर क्लिक करने से टेक्स्ट छिप जाएगा।
चरण 6
पिछले चरण में वर्णित के समान टेक्स्ट ब्लॉक की आवश्यक संख्या बनाएं, स्पैन टैग की आईडी विशेषता में आईडी को बदलना याद रखें और दो लिंक में ऑनक्लिक ईवेंट द्वारा फ़ंक्शन को पास किए गए चर में।
