علامات تبويب التنقل W3.CSS
لندن
لندن هي عاصمة إنجلترا.
إنها المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، حيث يبلغ عدد سكانها أكثر من 9 ملايين نسمة.
التنقل المبوب
يعد التنقل المبوب طريقة للتنقل حول موقع ويب.
عادة ، يستخدم التنقل المبوب أزرار التنقل (علامات التبويب) مرتبة مع علامة التبويب المحددة المميزة.
يستخدم هذا المثال عناصر بنفس اسم الفئة ("المدينة" في مثالنا) ، ويغير النمط بين display: none و display: block لإخفاء وعرض محتوى مختلف:
مثال
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
وبعض الأزرار القابلة للنقر لفتح المحتوى المبوب:
مثال
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
وجافا سكريبت للقيام بالمهمة:
مثال
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
شرح JavaScript
يتم استدعاء وظيفة openCity () عندما ينقر المستخدم على أحد الأزرار في القائمة.
تخفي الوظيفة جميع العناصر التي تحمل اسم الفئة "city" ( display = "none" ) ، وتعرض العنصر باسم المدينة المحدد ( display = "block" ) ؛
علامات تبويب قابلة للإغلاق
لندن
لندن هي عاصمة إنجلترا.
لإغلاق علامة تبويب ، أضف onclick = "this.parentElement.style.display = 'none'" إلى عنصر داخل حاوية علامة التبويب:
مثال
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
نشط / علامة التبويب الحالية
لتمييز علامة التبويب / الصفحة الحالية التي يعمل عليها المستخدم ، استخدم JavaScript وأضف فئة لون إلى الارتباط النشط. في المثال أدناه ، قمنا بإضافة فئة "tablink" إلى كل رابط. بهذه الطريقة ، يكون من السهل الحصول على جميع الروابط المرتبطة بعلامات التبويب ، وإعطاء رابط علامة التبويب الحالية فئة "w3-red" ، لتمييزها:
مثال
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
علامات تبويب عمودية
مثال
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
محتوى علامة التبويب المتحركة
استخدم أيًا من فئات w3-animate- للتلاشي أو التكبير والتصغير أو الانزلاق في محتوى علامة التبويب:
مثال
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
معرض الصور المبوب
اضغط على الصورة:
مثال
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
علامات التبويب في الشبكة
استخدام علامات التبويب في تخطيط العمود الثالث. لاحظ أننا نضيف حدًا سفليًا إلى علامة التبويب النشطة ، بدلاً من لون الخلفية: