يواجه مطورو الويب باستمرار مهمة إخفاء الكتل وعرضها على صفحة الويب عند النقر فوق عناصر معينة. على سبيل المثال ، عند النقر فوق زر أو رابط ، تحتاج إلى ظهور كتلة مخفية بمعلومات إضافية.
هناك عدة طرق لتنفيذ هذه الوظيفة باستخدام لغة جافا سكريبت ومكتباتها. ومع ذلك ، سننظر اليوم في طريقة بسيطة لا تتطلب استخدام جافا سكريبت ، ولكنها تعتمد فقط على استخدام لغة ترميز هتمل وقدراتها.
لتنفيذ هذه الطريقة ، تحتاج إلى استخدام السمة "المحددة" القابلة للتحويل للعلامة ومحدد كس الخاص الذي سيحدد أنماط الكتلة التي يجب أن تظهر عند تنشيط مربع الاختيار.
- زر "إظهار الكتلة": طريقة بسيطة وفعالة
- إنشاء زر
- تعيين أنماط كتلة الأولية
- معالجة حدث النقر على الزر
- الانتهاء من النتيجة النهائية
- سؤال وجواب
- كيف يمكنني جعل كتلة تظهر عند النقر على زر?
- كيف يمكنني إضافة معالج الحدث انقر على زر?
- كيف يمكنني تغيير نمط كتلة لعرض: منع عند النقر على زر?
- هل من الممكن جعل الكتلة تختفي عند الضغط على الزر مرة أخرى?
- كيف يمكنني تحريك مظهر كتلة عند الضغط على زر?
زر "إظهار الكتلة": طريقة بسيطة وفعالة
من أجل تنفيذ زر "إظهار الكتلة" ، والذي يسمح بظهور كتلة مخفية عند النقر عليها ، يمكنك استخدام طريقة بسيطة وفعالة. في هذا القسم ، سننظر في هذه الطريقة بمزيد من التفصيل.
أولا ، تحتاج إلى إنشاء عنصر يمثل زرا. للقيام بذلك ، يمكنك استخدام العلامة أو مع سمة "النوع" مع القيمة "زر".
مثال على رمز الزر:
إظهار الكتلة
بعد ذلك ، تحتاج إلى إنشاء كتلة ستكون مخفية وستظهر عند النقر فوق الزر. للقيام بذلك ، يمكنك استخدام علامة
أو أي علامة أخرى مناسبة.
مثال على رمز الكتلة:
كتلة مخفية
من أجل تنفيذ تأثير الكتلة التي تظهر عند النقر فوق الزر ، يجب استخدام جافا سكريبت. يوجد أدناه مثال على نص بسيط:
في هذا المثال ، نستخدم طريقة جيتليمنتبيد للحصول على روابط إلى الزر وعناصر الكتلة المخفية. بعد ذلك ، عندما نضغط على الزر ، نقوم بتغيير خاصية عرض الكتلة المخفية إلى "حظر" بحيث تصبح مرئية.
الآن ، عند النقر فوق الزر" إظهار الحظر " ، ستظهر الكتلة المخفية على الصفحة.
ملاحظة: لتحسين تجربة المستخدم ، يوصى بإضافة رسوم متحركة إلى مظهر الكتلة ، على سبيل المثال ، باستخدام انتقالات كس و/أو الرسوم المتحركة.
إنشاء زر
سوف تحتاج إلى رمز هتمل التالي لإنشاء الزر:
نص الزر
مثال:
انقر لي!
وهذا الرمز إنشاء زر مع النص " انقر لي!".
تعيين أنماط كتلة الأولية
- من أجل تعيين أنماط كتلة الأولية ، يمكنك استخدام كس. كس هي لغة النمط الذي يسمح لك لتحديد مظهر عنصر على صفحة ويب.
- مثال على تعيين الأنماط الأولية للكتلة:
- في هذا المثال ، أنشأنا فئة. "كتلة" ، والتي تحدد الأنماط التالية:
- عرض الكتلة 200 بكسل
- ارتفاع الكتلة 200 بكسل
لون خلفية الكتلة هو # إف 2 إف 2 إف 2
الحد من كتلة هو 1 بكسل ، الصلبة ، اللون # سك
الهامش الداخلي للكتلة هو 20 بكسل من جميع الجوانب
صف دراسي."كتلة" يمكن تطبيقها على أي عنصر هتمل لتعيين هذه الأنماط الأولية لذلك.
معالجة حدث النقر على الزر
- يعد التعامل مع حدث النقر على الزر أحد العناصر الرئيسية لبرمجة صفحات الويب. الزر هو عنصر تفاعلي يسمح للمستخدمين بتنفيذ إجراءات معينة عند النقر فوقه.
- يتم استخدام جافا سكريبت للتعامل مع حدث النقر على الزر ، والذي يسمح لك بإضافة وظائف إلى الزر.
- مثال الاستخدام:
قم بإنشاء زر باستخدام علامة وحدد المعرف الفريد للزر باستخدام سمة المعرف.
في جافا سكريبت ، إضافة معالج للزر انقر فوق الحدث باستخدام طريقة أديفنتليستينر. كمعلمة أولى للطريقة ، قم بتمرير حدث" النقر " ، وكمعلمة ثانية ، قم بتمرير الوظيفة التي سيتم تنفيذها عند النقر فوق الزر.
في الوظيفة ، حدد الإجراءات اللازمة التي يتعين تنفيذها عند النقر فوق الزر.
مثال على الكود:
انقر لي!
في هذا المثال ، عند النقر فوق الزر ، الرسالة " تم الضغط على الزر!"سيتم عرضها. يمكنك استبدال تنبيه مع أي إجراءات أخرى تحتاج إليها.
وبالتالي ، يتيح لك التعامل مع حدث النقر على الزر إضافة تفاعل ووظائف إلى صفحات الويب الخاصة بك ، مما يتيح للمستخدم التفاعل مع عناصر الصفحة.
الانتهاء من النتيجة النهائية
بعد كل الخطوات السابقة ، حصلنا على طريقة بسيطة تظهر بها كتلة عند النقر فوق الزر. يبدو الكود الخاص بنا كما يلي:
إظهار الكتلة
هذه كتلة مخفية
الآن ، عندما ينقر المستخدم على زر" إظهار الحظر " ، سيتم عرض الكتلة المخفية على الصفحة.
أضفنا أيضا أنماطا للفئة" المخفية " لإخفاء الكتلة في البداية. عند النقر فوق الزر ، نقوم بإزالة هذه الفئة من الكتلة ، مما يسمح بعرضها.
باستخدام هذه الطريقة البسيطة ، يمكنك بسهولة إضافة تفاعل مع العناصر على صفحة الويب الخاصة بك لإنشاء مواقع أكثر ديناميكية وتفاعلية.
سؤال وجواب
كيف يمكنني جعل كتلة تظهر عند النقر على زر?
لكي تظهر الكتلة عند النقر فوق الزر ، يجب استخدام جافا سكريبت. يمكنك استخدام الطريقة البسيطة التالية: إضافة معالج حدث نقرة إلى الزر ، والذي سيغير نمط الكتلة لعرضه: حظر مع كل نقرة. على سبيل المثال:
كيف يمكنني إضافة معالج الحدث انقر على زر?
لإضافة معالج لحدث النقر إلى زر ، يمكنك استخدام طريقة أديفنتليستينر. نموذج التعليمات البرمجية يشبه هذا:
كيف يمكنني تغيير نمط كتلة لعرض: منع عند النقر على زر?