اعلن عن قالبك على كن مدون

إضافة تبويبات أفقية HTML - CSS - JavaScript

أحد وسائل عرض المحتوى وهي التبويبات , وكنا عرضنامن قبل نظام تبويبات رأسي أوكورديون ونكمل معكم في تلك الأنظمة بنظام تبويبات أفقي

إضافة تبويبات أفقية HTML - CSS - JavaScript

أضف الكود في صفحة أو موضوع أو آداة HTML/JavaScript
<style>
.tabs-container{display:flex;gap:5px;flex-wrap:wrap;}
.cnmu-tabs{background-color:#f8f8f8;padding:0 15px;height:40px;color:#000;border:0;cursor:pointer;font:inherit;}
.cnmu-tabs:hover{background-color:#446eac;color:#fff;transition:all .4s;}
button.cnmu-tabs.active-tab{background-color:#446eac;color:#fff;}
.tab-content{display:none;border:1px solid #eee;padding:15px;}
</style>

<div class="tabs-container">
<button class="cnmu-tabs" onclick="openTab(event, 'tab1')">تبويب 1</button>
<button class="cnmu-tabs" onclick="openTab(event, 'tab2')">تبويب 2</button>
<button class="cnmu-tabs" onclick="openTab(event, 'tab3')">تبويب 3</button>
</div>

<div id="tab1" class="tab-content active-tab">
محتوى التبويب الأول
</div>

<div id="tab2" class="tab-content">
محتوى التبويب الثاني
</div>

<div id="tab3" class="tab-content">
محتوى التبويب الثالث
</div>


<script>
function openTab(event,tabId){var tabContents=document.getElementsByClassName("tab-content");for(var i=0;i<tabContents.length;i++){tabContents[i].style.display="none"}var tabLinks=document.getElementsByClassName("cnmu-tabs");for(var i=0;i<tabLinks.length;i++){tabLinks[i].className=tabLinks[i].className.replace(" active-tab","")}document.getElementById(tabId).style.display="block";event.currentTarget.className+=" active-tab"}document.getElementById("tab1").style.display="block";document.getElementsByClassName("cnmu-tabs")[0].className+=" active-tab";
</script>

شرح الإضافة
للحصول على تبويب جديد كرر الأكواد التي باللون الأحمرن وعدل الرقم 3 فيهم بالرقم التالي 4 , 5 , 6 الخ بحسب كل تكرار
اللون الأزرق استبدله بكود لون آخر مناسب لقالبك
وطبعا عدل محتوى التبويب بما تريد يمكنك اضافة نصوص أو أكواد HTML

معاينة الإضافة

أهلا بك في كن مدون

لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.

قوالبنا

لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.

إضافات بلوجر

لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.

8تعليقات

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

  1. روعة روعة روعة
    ما شاء الله
    بارك الله فيك أستاذ

    ردحذف
    الردود
    1. تسلم أخي منير وفيك بارك الله يا غالي 🌹

      حذف
  2. الردود
    1. يسرني أن الإضافة أعجبتك , شكراً لمرورك العطر

      حذف
  3. اضافة مدهشة حقا
    اسمحلى ان اسألك هل يمكن انشاء رابط يؤدي لتبويب معين من هذه التبويبات

    و شكرا لك.

    ردحذف
    الردود
    1. أهلا بك , يسرني ان الإضافة نالت اعجابك
      بالنسبة لؤالك غير ممكن لان التبويب لا يغير شئ في عنوان الرابط حتى يحيل الرابط اليه , يمكنك ان تجعل اهم معلوماتك في التبويب الأول النشط

      حذف