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

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

المعاينات والمرفقات

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

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

 

كيف يعمل ؟

 عندما يقوم المستخدم بالنقر على أحد أزرار التبويبات، يقوم كود 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-  كرر كود محتوى التبويب من كود البداية الى كود النهاية ليفتح لك عند الضغط على الزر الجديد الذي أنشأته.

للإستفسار أو شراء المنتج عبر

بايبال أو فودافون كاش

يرجى الطلب عبر النموذج التالي

تعليقات

4

شاركنا برأيك حول الإضافة ,
أو لو لديك اقتراح أو استفسار عنها أو تواجه مشكلة في استخدامها اترك تعليق وسيتم الرد عليك في أقرب وقت.

  1. بارك الله فك وجزاك الله خيرا على كل مجهوداتك التي تقوم بها شيخنا الفاضل
    إضافة ذات قيمة وسلسلة وسهلة جدا
    أسلوب راق في الشرح ومميز كعادتك

    ردحذف
    الردود
    1. الله يرفع قدرك يا غالي , شكراً لك 🌹

      حذف
  2. الردود
    1. حبيبي الغالي , العفو أستاذ أحمد نورت يا طيب 🌹

      حذف

الصفحات