نظام التبويبات التفاعلي في القرماني اكس AQX
يهدف هذا المقال إلى تقديم شرح مُبسّط وشامل للكود المُقدّم، والذي يُستخدم لإنشاء نظام تبويبات (Tabs) تفاعلي في صفحات الويب. تُعد التبويبات طريقة فعّالة لتنظيم المحتوى وعرضه بشكل مُنظّم دون الحاجة إلى التنقل بين صفحات متعددة، مما يُحسّن تجربة المستخدم.
كيف يعمل نظام التبويبات؟
عندما يقوم المستخدم بالنقر على أحد أزرار التبويبات، يقوم كود JavaScript بتغيير الفئات (Classes) على عناصر HTML. هذه التغييرات في الفئات تؤثر بدورها على الأنماط (Styles) المحددة في CSS. هذه الآلية تسمح بإنشاء تجربة تبويبات سلسة وتفاعلية.
لماذا تستخدم نظام التبويبات؟
- تنظيم المحتوى: يُساعد على تجميع المحتوى ذي الصلة معًا في مكان واحد.
- تحسين تجربة المستخدم: يقلل من التمرير ويجعل التنقل بين الأقسام أسهل وأسرع.
- كفاءة المساحة: يُمكنك عرض كمية كبيرة من المعلومات في مساحة محدودة.
- تصميم جذاب: يُضيف عنصرًا بصريًا ديناميكيًا إلى صفحة الويب.
التطبيق العملي: تركيب نظام التبويبات
باختصار، يقدم هذا الكود حلاً بسيطًا وفعالًا لإنشاء نظام تبويبات وظيفي وجذاب، مما يُسهم في تحسين تنظيم وعرض المحتوى على موقعك بشكل احترافي.
خطوات التركيب
أضف الكود التالي في أي صفحة أو موضوع أو آداة 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">محتوى التبويب 1</div>
<div>محتوى التبويب 2</div>
<div>محتوى التبويب 3</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>
تخصيص الكود
يمكنك التعديل على الكود بسهولة:
- الألوان: لتغيير لون التبويبات، استبدل الكود اللوني
#11769dبلونك المفضل. - المحتوى: يمكنك استبدال النصوص العربية بأي محتوى تريده (نصوص، صور، فيديوهات).
- إضافة تبويبات جديدة: ببساطة كرر كود زر الـ
<button>وكرر قسم المحتوى المقابل له.
إضافات قد تعجبك
اكتشف مقالاً برمجياً جديداً
جاري البحث داخل المقالات...
