تغيير علامات التبويب باستخدام JavaScript

لتحقيق هذا الهدف، يمكنك استخدام JavaScript للتحكم في عناصر علامات التبويب. في هذا السياق، يمكننا استخدام الحدث onclick لتنفيذ وظيفة تغيير عنصر التبويب النشط بناءً على الزر الذي تم النقر عليه. إليك كيفية تحقيق ذلك:

أولاً، قم بإعطاء الأزرار التي تريد استخدامها لتغيير العلامات تاب “id” فريدة لكل واحدة منها، هذا سيسهل علينا استهدافها بواسطة JavaScript. على سبيل المثال، يمكنك تعيين “id” مثل “btn-second” و “btn-third” للأزرار الخاصة بالتبويب الثاني والثالث على التوالي.

ثم، يمكنك إضافة السكريبت التالي في أسفل صفحتك لتنفيذ الوظيفة المطلوبة:

htmlCopy code
<script>
    // انتظار تحميل المستند بالكامل
    document.addEventListener("DOMContentLoaded", function() {
        // استهداف الأزرار التي تحتوي على ال id المحددة
        var btnSecond = document.getElementById("btn-second");
        var btnThird = document.getElementById("btn-third");

        // إضافة حدث النقر للزر الثاني
        btnSecond.addEventListener("click", function() {
            // تغيير العلامة التبويب النشطة إلى التبويب الثاني
            document.getElementById("second").classList.add("active");
            document.getElementById("first").classList.remove("active");
            document.getElementById("third").classList.remove("active");
        });

        // إضافة حدث النقر للزر الثالث
        btnThird.addEventListener("click", function() {
            // تغيير العلامة التبويب النشطة إلى التبويب الثالث
            document.getElementById("third").classList.add("active");
            document.getElementById("first").classList.remove("active");
            document.getElementById("second").classList.remove("active");
        });
    });
script>

هذا السكريبت يقوم بتغيير العلامة التبويب النشطة بناءً على الزر الذي يتم النقر عليه. عند النقر على زر الثاني، يتم إضافة فئة “active” إلى علامة التبويب الثانية وإزالتها من العلامات التبويب الأخرى، ونفس الأمر يتم عند النقر على زر الثالث.

باستخدام هذا السكريبت، يمكنك الآن تغيير العلامة التبويب النشطة باستخدام الأزرار بسهولة. تأكد من تغيير “id” لكل زر وفقًا للاحتياجات الخاصة بك وضمان التناسق مع العلامات التبويب المقابلة.

بالطبع، لنواصل تعزيز فهمك وتحقيق هدفك في تغيير العلامات التبويب بسهولة باستخدام JavaScript.

بعد أن قمت بتضمين السكريبت الذي وضعته في الجزء السابق من المقال، يمكنك الآن تمكين التبديل بين العلامات التبويب باستخدام الأزرار المعنية. ولكن هناك بعض النقاط الإضافية التي يجب أخذها في الاعتبار:

1. تحديد العلامة التبويب الافتراضية: قد ترغب في تحديد علامة التبويب النشطة افتراضيًا عند تحميل الصفحة لأول مرة. يمكنك القيام بذلك بإضافة فئة “active” إلى العلامة التبويب المرادة في HTML كما هو موضح في الكود الذي وضعته سابقًا.

2. تحسين التجربة الإستخدامية: يمكنك أيضًا تحسين التجربة الإستخدامية بإضافة تحريكات أو تأثيرات لتبديل العلامات التبويب، وذلك باستخدام مكتبات مثل jQuery أو CSS transitions.

3. التحقق من صحة العملية: قبل نشر موقعك على الإنترنت، تأكد من اختبار عملية تبديل العلامات التبويب على مختلف المتصفحات لضمان أنها تعمل بشكل صحيح ولا تظهر أخطاء.

تحتاج أيضًا إلى تأكيد أن العلامات التابعة للأزرار في القائمة العلوية لها نفس الـ IDs التي ستُغير بواسطة JavaScript. في الكود السابق، استخدمنا “btn-second” و “btn-third” كـ IDs للأزرار التي تغير العلامات، لذلك تأكد من أن تطابقها مع العلامات التبويب المقابلة في الـ HTML.

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