عندما ننشئ صفحات ويب ، نحتاج أحيانا إلى جعل منطقة معينة من الصفحة قابلة للنقر حتى يتمكن المستخدمون من النقر فوق ارتباط أو تنفيذ بعض الإجراءات عند النقر فوق تلك المنطقة. طريقة واحدة لجعل هذه المنطقة قابلة للنقر هي استخدام علامة
как ссылку.الوسم
является блочным элементом, который используется для создания блоков контента на веб-странице. Он обеспечивает структуру и организацию различных элементов веб-страницы. Однако, по умолчанию не имеет атрибутов или возможностей для добавления ссылок.لجعل
кликабельным, мы можем использовать JavaScript или использовать атрибуты HTML для добавления ссылки. Один из способов — это использование атрибута onclick. Например, мы можем добавить атрибут onclick к и определить функцию JavaScript, которая будет выполняться при нажатии на . Внутри функции, мы можем определить переход по ссылке или выполнение других действий.- كيف يمكنني جعل شعبة نقر واستخدامه بمثابة رابط?
- تمكين جافا سكريبت لتحويل ديف إلى رابط
- باستخدام المغلق لنمط شعبة الروابط
- إضافة السمة تابيندكس لتعيين ارتباط شعبة التي يمكن النقر عليها من لوحة المفاتيح
- استخدام جافا سكريبت لربط إجراء بنقرة على رابط شعبة
- إنشاء الرسوم المتحركة عند التمرير فوق ارتباط ديف باستخدام كس
- سؤال وجواب
- هل من الممكن لجعل كتلة شعبة قابلة للنقر?
- كيف يمكنني التأكد من أنه عند النقر على كتلة شعبة, يتم تنفيذ إجراء معين?
- هل من الممكن تعيين ارتباط إلى كتلة شعبة?
- كيف يمكنني تغيير المؤشر عندما تحوم فوق كتلة شعبة بحيث يفهم المستخدم أنه قابل للنقر?
كيف يمكنني جعل شعبة نقر واستخدامه بمثابة رابط?
في بعض الأحيان قد نحتاج إلى جعل كتلة ديف قابلة للنقر واستخدامها كحلقة وصل. يمكن أن يكون هذا مفيدا عندما نحتاج إلى إنشاء زر مخصص أو إنشاء منطقة قابلة للنقر لعرض معلومات إضافية.
بالمناسبة ، هذا من السهل القيام به مع هتمل و كس. ويرد مثال أدناه:
}
إضافة معالج جافا سكريبت لهذا الحدث انقر:
الآن ، عند النقر على كتلة ديف ، سيتم تنفيذ التعليمات البرمجية التي كتبتها في معالج الحدث انقر. على سبيل المثال ، يمكنك استخدام نافذة او شباك.الموقع.هريف للانتقال إلى صفحة أخرى أو إضافة وظائف أخرى.
استخدام كتلة شعبة كحلقة وصل يوسع إمكانيات تخطيط ويمنحك المزيد من الحرية لنمط وخلق عناصر تفاعلية من صفحة ويب.
تمكين جافا سكريبت لتحويل ديف إلى رابط
لتحويل كتلة ديف إلى عنصر قابل للنقر ، يمكننا استخدام جافا سكريبت.
أولا ، دعونا إنشاء كتلة ديف مع معرف فريد:
انقر على هذه الكتلة لاتباع الرابط
يرجى ملاحظة أن استخدام جافا سكريبت لتحويل ديف إلى رابط يمكن أن يكون مفيدا إذا كنت بحاجة إلى إنشاء عنصر قابل للنقر لا يمكن إنشاؤه باستخدام علامة عادية.
شعبة
- عنصر في رابط قابل للنقر ، يمكننا استخدام كس لإضافة أنماط معينة. هذا يسمح لك لجعلشعبة
تبدو أكثر مثل رابط منتظم مع تسطير سفلي عند التمرير ، ولون قابل للتغيير عند النقر عليه ، وما إلى ذلك.
عنصر مع المحتوى المطلوب:
هذا مثال على رابط ديف
ثم يمكننا تطبيق الأنماط على هذا
شعبة
عنصر باستخدام المغلق. على سبيل المثال:
/ * إنشاء نمط لرابط شعبة */
. رابط ديف {
اللون: أزرق ؛ / * ضبط لون النص في الرابط */
زخرفة النص: تسطير ؛ / * إضافة تسطير سفلي عند التمرير فوق الرابط */
المؤشر: المؤشر ؛ / * تغيير المؤشر عند التمرير فوق الرابط */
}
اللون: أحمر ؛ / * تغيير لون النص في الرابط عند التمرير */
}
/ * تغيير نمط الارتباط عند النقر */
. رابط ديف: نشط {
اللون: أخضر ؛ / * تغيير لون النص في الرابط عند النقر */
}
الآن لدينا
شعبة
سوف عنصر تبدو وتتصرف مثل وصلة العادية ، وذلك بفضل استخدام أنماط كس المحددة. يمكنك أيضا استخدام أنماط أخرى لتحقيق التأثير المرئي المطلوب.
إضافة السمة تابيندكس لتعيين ارتباط شعبة التي يمكن النقر عليها من لوحة المفاتيح
لكي تصبح كتلة ديف عنصرا قابلا للنقر باستخدام لوحة المفاتيح ، تحتاج إلى إضافة سمة تابيندكس. السمة تابيندكس يسمح لك لتعيين ترتيب التركيز على عناصر صفحة ويب عند التنقل باستخدام لوحة المفاتيح.
لتعيين عنصر ديف كرابط قابل للنقر ، قم بتعيين سمة تابيندكس مع القيمة"0". على سبيل المثال:
- ...
- من المهم أن نلاحظ أن تعيين سمة تابيندكس إلى عنصر ديف سوف تسمح لك للسيطرة عليه باستخدام لوحة المفاتيح ، ولكن السمة نفسها لا تحدد إجراء عند النقر أو الضغط على مفتاح إنتر. وهذا يتطلب شفرة جافا سكريبت إضافية من شأنها التعامل مع ضغطة أو الماوس فوق الأحداث على عنصر ديف وتنفيذ الإجراءات اللازمة.
استخدام جافا سكريبت لربط إجراء بنقرة على رابط شعبة
في بعض الأحيان يكون من الضروري جعل كتلة ديف قابلة للنقر بحيث عند النقر عليها ، يتم تنفيذ إجراء معين ، على سبيل المثال ، التبديل إلى صفحة أخرى أو فتح نافذة مشروط. يمكنك استخدام جافا سكريبت للقيام بذلك.
وإليك كيف يمكنك ربط إجراء بنقرة على رابط ديف باستخدام جافا سكريبت:
أولا ، نضيف معرف إلى رابط ديف لدينا لتكون قادرة على الوصول إليه باستخدام جافا سكريبت.
ثم نقوم بإنشاء وظيفة سيتم تنفيذها عند النقر على رابط ديف. في هذه الوظيفة ، يمكنك تحديد الإجراء الذي يجب تنفيذه.
أخيرا ، نستخدم
أدفنتليستينر()
طريقة لربط هذه الوظيفة بحدث
يوجد أدناه مثال على الكود:
هذا هو رابط شعبة. اضغط عليها!
نموذج التعليمات البرمجية:
حرك المؤشر فوقي
في هذا المثال ، لدينا عنصر ديف مع فئة" لينك". باستخدام كس ، قمنا بتعيين أنماط لهذا العنصر. عند التمرير فوقه باستخدام مؤشر الماوس (باستخدام فئة زائفة
تحوم
) ، يغير العنصر لون النص إلى اللون الأحمر (
اللون: # فف0000;
) ويزيد في الحجم بنسبة 10 ٪ (