كيفية إنشاء علامات التبويب باستخدام CSS وجافا سكريبت؟

لغة البرمجة ' نوافذ التبويب 'هي الكتل التي تخزن محتوى موقع الويب في أجزاء. يتم استخدامها لعرض المحتوى المخزن باستخدام طرق متعددة مثل النقر بالماوس والنقر المزدوج والتمرير وغير ذلك الكثير. توفر علامات التبويب أبسط طريقة للتنقل عبر صفحات الويب المختلفة لموقع الويب. بالإضافة إلى ذلك، فهي تساعد أيضًا في إدارة المساحة وجعل الموقع أكثر جاذبية وجاذبية.

سيشرح هذا الدليل كيفية إنشاء علامات التبويب باستخدام CSS وJavaScript.

كيفية إنشاء علامات التبويب باستخدام CSS وجافا سكريبت؟

ينفذ هذا القسم إرشادات خطوة بخطوة لإنشاء علامات التبويب باستخدام CSS وJavaScript.

الخطوة 1: إنشاء بنية علامات التبويب باستخدام HTML

أولاً، انظر إلى كود HTML الذي ينشئ بنية علامات تبويب HTML:

< معرف القسم = 'علامة التبويب 1' عند النقر = 'أولاً()' > بيت شعبة >

< معرف القسم = 'علامة التبويب 2' عند النقر = 'ثانية()؛' > عن شعبة >

< معرف القسم = 'tab3' عند النقر = 'ثالث()؛' > اتصل بنا شعبة >

< ر />

< معرف القسم = 'تابع 1' > مرحبًا بك في لينكسشينت ! شعبة >

< معرف القسم = 'تابع 2' > تعليم تقني

لقد قمنا ببناء العديد من المنتجات لمساعدتك في التعرف على Linux والبرمجة وعلوم الكمبيوتر والمزيد.

شعبة >

< معرف القسم = 'تابع 3' >

يمكنك الاتصال بفريقنا على Editor AT linuxhint DOT com.

شعبة >

في سطور الكود أعلاه:

ال ' <ديف> تضيف العلامة 'عنصر div بمعرف 'tab1' و'مرفق' عند النقر ' حدث لتنفيذ الارتباط ' أولاً() '' عند النقر عليها. يعمل هذا العنصر كعلامة تبويب HTML.
يتم تنفيذ الطريقة المذكورة أعلاه لعنصري div التاليين.
ال '
تضيف العلامة 'فاصل أسطر'.
ال ' <ديف> تقوم العلامة مرة أخرى بإدراج عنصر div له المعرف المخصص 'cont1'. يعرض هذا العنصر محتوى علامة التبويب التي تم إنشاؤها في كتلة.
التاليين ' <ديف> تضيف العلامات أيضًا عناصر div مع المعرفات المخصصة لها.

الخطوة 2: تحديد علامات التبويب باستخدام CSS

الآن، قم بتطبيق خصائص نمط CSS لتخصيص علامات التبويب ومحتوياتها وفقًا لاختيارك:

< أسلوب >

#tab1, #tab2, #tab3 {

يطفو : غادر ;

حشوة : 5 بكسل 10 بكسل 5 بكسل 10 بكسل ;

خلفية : أحمر برتقالي ;

لون : #FFFFFF ;

هامِش : 0 بكسل 5 بكسل 0 بكسل 5 بكسل ;

المؤشر : المؤشر ;

حدود - نصف القطر : 3 بكسل ;

}

#tab1 : قم بالتحويم، #tab2 : hover, #tab3 : يحوم {

خلفية : أخضر ;

}

#المحتوى 1، #المحتوى 2، #المحتوى 3 {

عرض : 300 بكسل ;

ارتفاع : 100 بكسل ;

حشوة : 40 بكسل ;

الخط - مقاس : واسطة ;

الخط - عائلة : 'تايمز نيو رومان' ، تايمز، شريف ;

حدود : 2 بكسل برتقالي أحمر خالص ;

حدود - نصف القطر : 7px ;

عرض : لا أحد ;

}

أسلوب >

في مقتطف الشفرة المذكور:

أولاً قم بالدخول إلى ' نوافذ التبويب 'باستخدام المعرفات المخصصة لهم وتخصيصها عبر خصائص النمط التالية (العائمة والحشوة والخلفية واللون والهامش: 0px 5px 0px 5px والمؤشر ونصف القطر).
بعد ذلك، قم بإرفاق ' يحوم 'معالج الأحداث مع علامات التبويب لتغيير ألوان الخلفية عندما يمرر مؤشر الماوس فوقها.
بعد ذلك قم بالدخول إلى ' محتوى علامات التبويب 'المخزنة في عناصر div التي معرفاتها هي 'cont1' و'cont2' و'cont3'. الآن، قم بتطبيق خصائص النمط التالية (العرض والارتفاع والحشوة وحجم الخط وعائلة الخط والحدود ونصف قطر الحدود والعرض) عليها.

الخطوة 3: إضافة وظائف إلى علامات التبويب باستخدام JavaScript

وأخيرًا، أضف وظائف إلى علامات التبويب التي تم إنشاؤها بمساعدة JavaScript:

< النصي >

الوظيفة أولاً ( ) {

وثيقة. getElementById ( 'تابع 1' ) . أسلوب . عرض = 'حاجز' ;

وثيقة. getElementById ( 'تابع 2' ) . أسلوب . عرض = 'لا أحد' ;

وثيقة. getElementById ( 'تابع 3' ) . أسلوب . عرض = 'لا أحد' ;

}

وظيفة ثانية ( ) {

وثيقة. getElementById ( 'تابع 2' ) . أسلوب . عرض = 'حاجز' ;

وثيقة. getElementById ( 'تابع 1' ) . أسلوب . عرض = 'لا أحد' ;

وثيقة. getElementById ( 'تابع 3' ) . أسلوب . عرض = 'لا أحد' ;

}

وظيفة الثالثة ( ) {

وثيقة. getElementById ( 'تابع 3' ) . أسلوب . عرض = 'حاجز' ;

وثيقة. getElementById ( 'تابع 1' ) . أسلوب . عرض = 'لا أحد' ;

وثيقة. getElementById ( 'تابع 2' ) . أسلوب . عرض = 'لا أحد'

}

النصي >

أسطر التعليمات البرمجية أعلاه:

تحديد وظيفة باسم ' أولاً '.
في تعريف الوظيفة هذا، ' document.getElementById() ' يصل الأسلوب إلى عنصر div الذي يكون معرفه 'cont1' ويطبق ' أسلوب 'الملكية مع' حاجز 'القيمة عليه. ستعرض هذه الخاصية محتوى علامة التبويب التي ينقر عليها المستخدم.
بعد ذلك، يصل 'document.getElementById()' إلى div آخر ويطبق خاصية 'style' ذات القيمة 'none' لإخفائها. سيتم إخفاء هذا العنصر على صفحة الويب.
يتم تنفيذ الطريقة المذكورة أعلاه لعناصر div التالية التي تم الوصول إليها. وذلك لأن الوظيفة 'الأولى' تعرض فقط محتوى علامة التبويب التي تكون قيمة خاصية 'النمط' الخاصة بها هي 'حظر' وتخفي الآخرين.
يتم تنفيذ الإجراء أعلاه للوظائف 'الثانية ()' و'الثالثة ()' التالية.

انتاج |

يمكن ملاحظة أنه تم إنشاء علامات التبويب بنجاح وإظهار المحتوى الخاص بها عند نقر المستخدم.

خاتمة

لإنشاء علامات التبويب، قم أولاً ببناء بنياتها باستخدام 'HTML'، ثم قم بتخصيصها بمساعدة خصائص تصميم CSS. تتم إضافة خصائص التصميم دون تصدير أي ورقة أنماط إضافية. هذه الخصائص تجعل علامات التبويب جذابة وملفتة للنظر. بمجرد إنشاء علامات التبويب وتخصيصها، استخدم لغة برمجة JavaScript لإضافة وظائف إليها. لقد شرح هذا الدليل عمليًا الإجراء الكامل لإنشاء علامات التبويب باستخدام CSS وJavaScript.

كيفية إنشاء علامات التبويب باستخدام CSS وجافا سكريبت؟