لندن
لندن هي عاصمة إنجلترا.
وهي المدينة الأكثر اكتظاظا بالسكان في المملكة المتحدة، مع المنطقة الحضرية لأكثر من 13 مليون نسمة.
باريس
باريس هي عاصمة فرنسا.
منطقة باريس هي واحدة من أكبر المراكز السكانية في أوروبا، مع أكثر من 12 مليون نسمة.
طوكيو
طوكيو هي عاصمة اليابان.
ومن وسط طوكيو الكبرى، ومنطقة العاصمة الأكثر اكتظاظا بالسكان في العالم.
علامات التبويب (منظموا الجداول)
علامات التبويب هي مثالية لتطبيقات صفحة ويب واحدة، أو لصفحات الويب قادرة على عرض الموضوعات المختلفة.
مجرد خلق العديد من العناصر التي لها نفس اسم الفئة:
مثال
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
ثم إضافة بعض أزرار يمكن النقر عليها لفتح المحتوى (أزرار واحد، شريط التنقل، sidenav، الخ ..):
مثال
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>وإضافة جافا سكريبت لتحديد العناصر:
مثال
openCity("London");
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";
}
انها محاولة لنفسك » وأوضح جافا سكريبت
أولا، استدعاء openCity () لفتح "لندن" (معرف = "لندن).
ثم استدعاء فتح مدينة () مع اسم مدينة مختلفة (معرف = "باريس) عندما ينقر المستخدم على أحد الأزرار في القائمة.
وظيفة openCity () يخفي جميع العناصر (عرض = "لا شيء") مع اسم الفئة "المدينة"، ويعرض عنصر (عرض = "كتلة") مع هوية مدينة معينة.
نشطة / علامة التبويب الحالية
إذا كنت ترغب في تسليط الضوء على علامة التبويب / الصفحة الحالية المستخدم على استخدام جافا سكريبت وإضافة فئة اللون محددة لالارتباط علامة التبويب الحالية. في المثال التالي، قمنا بإضافة "tablink" الطبقة إلى كل وصلة. بهذه الطريقة، فمن السهل للحصول على كل الروابط التي يرتبط مع علامات التبويب، وإعطاء رابط علامة التبويب الحالية ل"W3-الأحمر" الطبقة، لتسليط الضوء على ما يلي:
مثال
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-sidenav w3-light-grey" style="width:130px">
<a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
<a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
<a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</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="javascript:void(0)" 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> انها محاولة لنفسك » علامات التبويب في الشبكة
استخدام علامات التبويب في تخطيط العمود الثالث. لاحظ أن نضيف الحد السفلي إلى علامة التبويب النشطة، بدلا من لون الخلفية: