Londra
Londra İngiltere'nin başkentidir.
13 milyonun üzerinde nüfuslu bir metropol alana sahip İngiltere'deki en kalabalık kentidir.
Paris
Paris, Fransa'nın başkentidir.
Paris alanı 12 milyondan fazla nüfusu ile Avrupa'nın en büyük nüfus merkezleri biridir.
Tokyo
Tokyo Japonya başkentidir.
Bu Greater Tokyo Alanının merkezi ve dünyanın en kalabalık metropol alandır.
Tab (Tabulators)
Sekmeler tek sayfa web uygulamaları için veya farklı konuların görüntüleme yeteneğine web sayfaları için idealdir.
Sadece aynı sınıf adıyla birçok unsurlar oluşturun:
Örnek
<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>
Ardından içeriği açmak için bazı tıklanabilir düğmeleri eklemek (tek düğmeler, navigasyon çubuğu, sidenav, vb ..):
Örnek
<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>Ve elemanlarını seçmek için JavaScript ekleyin:
Örnek
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";
}
Kendin dene " JavaScript Açıklaması
İlk olarak, çağrı openCity() açmak için "London" (id="London) .
Sonra açık çağrı City() farklı bir şehir adı ile (id="Paris) kullanıcı menüsündeki düğmelerin birini tıkladığında.
openCity() fonksiyonu tüm unsurları gizler ( display="none" ) sınıf adı ile "city" ve eleman görüntüler ( display="block" ) verilen şehir kimliğine sahip.
Aktif / Güncel Tab
Eğer kullanıcı üzerinde geçerli sekme / sayfayı vurgulamak istiyorsanız, JavaScript kullanabilirsiniz ve geçerli sekme bağlantısına belirli bir renk sınıfını ekleyin. Aşağıdaki örnekte, bir eklemiş "tablink" her bağlantı için sınıf. Şekilde, sekmeleri ile ilişkili tüm bağlantıları almak ve geçerli sekme bağlantıyı bir vermek kolaydır "w3-red" vurgulamak için, sınıf:
Örnek
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";
}
Kendin dene " Dikey Sekmeler
Örnek
<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>
Kendin dene " Hareketli Tab Content
Sekme içeriğindeki zoom veya slayt solmaya w3-animate- sınıfların herhangi birini kullanın:
Örnek
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Kendin dene " Sekmeli Resim Galerisi
x 
x 
x 
x Örnek
<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> Kendin dene " bir Grid Sekmeler
Üçüncü sütun düzeninde sekmeleri kullanma. bunun yerine bir arka plan renginin, aktif sekmesine bir alt kenarlık eklemek unutmayın: