يؤدي وضع كتل نصية مخفية إلى تحسين الإدراك البصري لصفحة موقع الويب - يتم تحميلها في المتصفح تمامًا كما صممها المصمم ، بغض النظر عن كمية المعلومات المنشورة. بالإضافة إلى ذلك ، فهو أكثر ملاءمة للزائر - بحثًا عن كتلة المعلومات الضرورية ، لا يتعين عليه البحث في المصفوفة بأكملها ، ولكن فقط "نصائح من الجبال الجليدية" الصغيرة.
انه ضروري
معرفة أساسية بلغة HTML و JavaScript
تعليمات
الخطوة 1
استخدم وظيفة JavaScript مخصصة لإخفاء وعرض كتل النص المطلوبة في صفحة HTML. تعتبر الوظيفة المشتركة لجميع الكتل أكثر ملاءمة من إضافة رمز لكل منها على حدة. في جزء الرأس من التعليمات البرمجية المصدر للصفحة ، ضع علامتي الفتح والإغلاق النصي ، ثم أنشئ بينهما دالة فارغة تحمل اسمًا ، على سبيل المثال ، تبديل ومعرف معلمة الإدخال المطلوب: تبديل الوظيفة (المعرف) {}
الخطوة 2
أضف سطرين من كود JavaScript إلى جسم الوظيفة ، بين الأقواس المتعرجة. يجب أن يقرأ السطر الأول الحالة الحالية لكتلة النص - سواء كانت الرؤية في وضع التشغيل أو الإيقاف. يمكن أن يكون هناك العديد من هذه الكتل في المستند ، لذلك يجب أن يكون لكل منها معرف خاص به - وظيفته هي التي تتلقى id كمعامل الإدخال الوحيد. باستخدام هذا المعرف ، يبحث عن الكتلة الضرورية في المستند ، ويعين قيمة الرؤية / الخفاء (حالة خاصية العرض) إلى متغير sDisplay: sDisplay = document.getElementById (id).style.display؛
الخطوه 3
يجب أن يغير السطر الثاني خاصية عرض كتلة النص المطلوبة إلى العكس - قم بإخفائها إذا كان النص مرئيًا ، وأظهر ما إذا كان مخفيًا. يمكن القيام بذلك باستخدام الكود التالي: document.getElementById (id).style.display = sDisplay == 'none'؟ '': 'لا أحد'؛
الخطوة 4
أضف ورقة الأنماط التالية إلى قسم الرأس: {cursor: pointer} ستحتاج إلى هذا لعرض مؤشر الماوس بشكل صحيح عند التمرير فوق علامة ارتباط غير مكتملة. بمساعدة هذه الروابط ، تقوم بالتنظيم في الصفحة لتبديل رؤية / إخفاء كتل النص.
الخطوة الخامسة
ضع روابط التبديل هذه في النص قبل كل كتلة مخفية ، وفي الكتل الموجودة في نهاية النص ، أضف رابطًا مشابهًا. قم بإحاطة النص غير المرئي في علامات النطاق التي تم تعيين عدم مرئي لها في سمات النمط الخاصة بها. على سبيل المثال: قم بتوسيع النص +++ هذا نص مخفي --- في هذا المثال ، سيؤدي النقر فوق ارتباط ثلاثة زائد إلى استدعاء الوظيفة أعلاه في حدث onClick ، وتمرير معرف الكتلة ليكون مرئيًا. وداخل الكتلة يوجد رابط من ثلاثة سلبيات لها نفس الوظائف - سيؤدي النقر عليها إلى إخفاء النص.
الخطوة 6
قم بإنشاء العدد المطلوب من الكتل النصية ، على غرار تلك الموصوفة في الخطوة السابقة ، تذكر تغيير المعرفات في سمة المعرف الخاصة بعلامة الامتداد وفي المتغير الذي تم تمريره إلى الوظيفة بواسطة حدث onClick في الرابطين.
