كيفية إنشاء: علامة التبويب الشاملة

تعلم كيفية استخدام CSS و JavaScript لإنشاء علامة التبويب الشاملة التي تغطي نافذة المتصفح بأكملها (علامة التبويب الشاملة).

إنشاء علامة التبويب الصفحة

الخطوة الأولى - إضافة HTML:

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">اتصال</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">حول</button>
<div id="Home" class="tabcontent">
  <h3>المنزل</h3>
  <p>المنزل هو حيث يكون القلب...</p>
</div>
<div id="News" class="tabcontent">
  <h3>أخبار</h3>
  <p>بعض الأخبار في هذا اليوم الجميل!</p>
</div>
<div id="Contact" class="tabcontent">
  <h3>اتصال</h3>
  <p>اتصل بنا أو زرع لشرب كوب من القهوة.</p>
</div>
<div id="About" class="tabcontent">
  <h3>حول</h3>
  <p>من نحن وما نقوم به.</p>
</div>

إنشاء زر لفتح محتويات علامة التبويب المحددة. جميع الأزرار التي تحتوي على الصفة="tabcontent" من <div> كل العناصر هي مخفية بشكل افتراضي (من خلال CSS و JS). عند الضغط على الزر، يفتح محتويات علامة التبويب التي تطابق هذا الزر.

الخطوة الثانية - إضافة CSS:

تعيين نمط رابط و محتويات علامة التبويب (الصفحة الكاملة):

/* تعيين طول الجسم وثمرة المستند إلى 100%، لتمكين "علامة التبويب الكاملة للصفحة"
الجسم، html {
  height: 100%;
  مكان: 0;
  عائلة الخط: Arial;
}
/* تعيين نمط رابط علامة التبويب */
.tablink {
  لون الخلفية: #555;
  color: white;
  تحليق: اليسار;
  حافة: لا شيء;
  تقديم: لا شيء;
  مؤشر: pointer;
  الملء: 14px 16px;
  font-size: 17px;
  width: 25%;
}
.tablink:hover {
  background-color: #777;
}
/* ضبط نمط محتويات الوسيط (وإضافة طول الصفحة: 100%) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

الخطوة الثالثة - إضافة JavaScript:

function openPage(pageName, elmnt, color) {
  // إخفاء جميع العناصر بـ class="tabcontent" بشكل افتراضي
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // إزالة لون الخلفية لجميع روابط/أزرار الوسيط
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  // عرض محتويات الوسيط المحدد
  document.getElementById(pageName).style.display = "block";
  // إضافة لون معين للزر المستخدم لفتح محتويات الوسيط
  elmnt.style.backgroundColor = color;
}
// حصول على العنصر بـ id="defaultOpen" وتفعيله
document.getElementById("defaultOpen").click();

جربها بنفسك

الصفحات ذات الصلة

دليل:كيفية إنشاء علامة التبويب