إظهار وإخفاء النص أو الصور باستخدام CSS و JavaScript

قم بإنشاء تجربة على غرار التطبيقات على مواقع الويب الخاصة بك

يتيح لك HTML الديناميكي (DHTML) إنشاء تجربة نمط تطبيق على مواقع الويب الخاصة بك ، مما يقلل من تكرار تحميل الصفحات بالكامل. في التطبيقات ، عندما تنقر على شيء ما ، يتغير التطبيق على الفور لإظهار ذلك المحتوى المحدد أو لتزويدك بإجابتك.

في المقابل ، يجب إعادة تحميل صفحات الويب ، أو تحميل صفحة جديدة بالكامل. هذا يمكن أن يجعل تجربة المستخدم أكثر مفككة. يتعين على عملائك الانتظار حتى يتم تحميل الصفحة الأولى ثم الانتظار مرة أخرى حتى يتم تحميل الصفحة الثانية ، وهكذا.

استخدام & lt؛ div & gt؛ لتحسين تجربة المشاهد

باستخدام DHTML ، تعد إحدى أسهل الطرق لتحسين هذه التجربة هي تشغيل عناصر div وإيقاف تشغيلها لعرض المحتوى عند طلبها. يعرّف عنصر div الأقسام المنطقية على صفحتك على الويب. فكر في div كعلبة قد تحتوي على فقرات ، وعناوين ، وروابط ، وصور ، وحتى أقسام أخرى.

ما تحتاج إليه

لإنشاء قسم يمكن تشغيله وإيقافه ، تحتاج إلى ما يلي:

• رابط للتحكم في div من خلال تشغيله وإيقافه عند النقر عليه
• div لإظهار وإخفاء
• CSS لتمييز div hidden أو المرئي
• JavaScript لتنفيذ الإجراء

رابط التحكم

رابط التحكم هو الجزء الأسهل. ما عليك سوى إنشاء رابط مثلما تفعل مع صفحة أخرى. الآن ، اترك سمة href فارغة.

تعلم HTML

ضع هذا في أي مكان على صفحة الويب الخاصة بك.

Div لإظهار وإخفاء

أنشئ عنصر div الذي تريد إظهاره وإخفائه. تأكد من حصول div على معرف فريد عليه. في المثال ، المعرف الفريد هو تعلم HTML .