إضافة تبويبات HTML - CSS - JS

 يهدف هذا المقال إلى تقديم شرح مُبسّط وشامل للكود المُقدّم، والذي يُستخدم لإنشاء نظام تبويبات (Tabs) تفاعلي في صفحات الويب. تُعد التبويبات طريقة فعّالة لتنظيم المحتوى وعرضه بشكل مُنظّم دون الحاجة إلى التنقل بين صفحات متعددة، مما يُحسّن تجربة المستخدم.

كيف يعمل ؟

 عندما يقوم المستخدم بالنقر على أحد أزرار التبويبات، يقوم كود JavaScript بتغيير الفئات (Classes) على عناصر HTML. هذه التغييرات في الفئات تؤثر بدورها على الأنماط (Styles) المحددة في CSS. على سبيل المثال، عندما يُضاف activebtn لزر، يتغير لونه. وعندما تُضاف activecont لقسم محتوى، يصبح مرئيًا. هذه الآلية تسمح بإنشاء تجربة تبويبات سلسة وتفاعلية.

لماذا تستخدم نظام التبويبات؟

• تنظيم المحتوى: يُساعد على تجميع المحتوى ذي الصلة معًا في مكان واحد.
• تحسين تجربة المستخدم: يقلل من التمرير ويجعل التنقل بين الأقسام أسهل وأسرع.
• كفاءة المساحة: يُمكنك عرض كمية كبيرة من المعلومات في مساحة محدودة على الصفحة.
• تصميم جذاب: يُضيف عنصرًا بصريًا ديناميكيًا إلى صفحة الويب.

باختصار، يقدم هذا الكود حلاً بسيطًا وفعالًا لإنشاء نظام تبويبات وظيفي وجذاب، مما يُسهم في تحسين تنظيم وعرض المحتوى على موقعك.

شرح التركيب

أضف الكود التالي في صفحة أو موضوع أو آداة HTML/JavaScript

<style>
#tabs-cont {width: 100%;}  
#tabsbtn{display:flex;gap:5px;flex-wrap:wrap;}
#tabsbtn button{background-color:#f1f1f1;padding:0 10px;height:40px;border-radius:5px 5px 0 0;min-width:80px;flex-shrink:0;cursor:pointer;border: none;}
#tabsbtn .activebtn{background-color:#11769d;color:#fff;}
#tabs-content{background-color:#fff;border:1px solid #f1f1f1;padding:15px;}
#tabs-content > div{display:none;}
#tabs-content > div.activecont{display:block;}
</style>

<div id="tabs-cont">

 <div id="tabsbtn">
  <button class="activebtn">تبويب 1</button>
  <button>تبويب 2</button>
  <button>تبويب 3</button>
 </div>

 <div id="tabs-content">


  <!--محتوى تبويب بداية-->
  <div class="activecont">
   هنا المحتوى
  </div>
  <!--محتوى تبويب نهاية-->

  <!--محتوى تبويب بداية-->
  <div>
   هنا المحتوى
  </div>
  <!--محتوى تبويب نهاية-->

  <!--محتوى تبويب بداية-->
  <div>
   هنا المحتوى
  </div>
  <!--محتوى تبويب نهاية-->


 </div>


 </div>

<script>
const buttons=document.querySelectorAll("#tabsbtn button");const contents=document.querySelectorAll("#tabs-content > div");buttons.forEach((button,index)=>{button.addEventListener("click",()=>{contents.forEach(content=>content.classList.remove("activecont"));contents[index].classList.add("activecont");buttons.forEach(btn=>btn.classList.remove("activebtn"));button.classList.add("activebtn")})});
</script>

 شرح الكود

هذا هو كود اللون استبدله بلون آخر مناسب لموقعك find#11769d 

استبدل الكلمات العربية بما تريد , مع العلم أنك ممكن في المحتوى ان تضيف أكواد أو فيديو او صور الخ

ان اردت المزيد من التبويبات 

1- كرر كود زر find<button>تبويب 3</button> التبويب للحصول على تبويب .

2-  كرر كود محتوى التبويب من كود البداية الى كود النهاية ليفتح لك عند الضغط على الزر الجديد الذي أنشأته.

• 💢
• معاينة

برامج شروحات قوالب

موقع برامج وتطبيقات - أفضل البرامج المجانية :

موقعنا هو وجهتك المثالية لتنزيل أحدث البرامج والتطبيقات والإضافات للمتصفحات. نقدم مجموعة واسعة من الخيارات الموثوقة والآمنة لتلبية احتياجاتك الرقمية.

نشأة الموقع

كتبت اول مقالة في الموقع بتاريخ ٣ أبريل ٢٠٢٥

وقد تجاوز عدد المقالات الى الآن 44 مقال

موقع شروحات بلوجر - معلومات ودروس لتعليم بلوجر :

دليلك الشامل لتعلم بلوجر من الصفر حتى الاحتراف. شروحات مفصلة، نصائح حصرية، وقوالب جاهزة لتصميم مدونتك المثالية

نشأة الموقع

كتبت اول مقالة في الموقع بتاريخ ٢٥ فبراير ٢٠٢٥

وقد تجاوز عدد المقالات الى الآن 21 مقال

موقع قوالب بلوجر - مجموعة قوالب احترافية لمنصة بلوجر :

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

نشأة الموقع

كتبت اول مقالة في الموقع بتاريخ ٢٣ فبراير ٢٠٢٥

وقد تجاوز عدد المقالات الى الآن 11 مقال

محتوى الموقع

أهم القوالب

• مختصر
• واجهة
• عصر التقنية
• مظهر المنتديات
• شعاع
• دليل بلوج
• رال Vi
• مدونتي
• أركان
• تسوق بلوجر