W3.CSS Gezinme Sekmeleri
Londra
Londra, İngiltere'nin başkentidir.
9 milyonu aşan nüfusu ile Birleşik Krallık'ın en kalabalık şehridir.
Sekmeli Gezinme
Sekmeli gezinme, bir web sitesinde gezinmenin bir yoludur.
Normalde, sekmeli gezinme, seçili sekme vurgulanmış olarak düzenlenmiş gezinme düğmelerini (sekmeler) kullanır.
Bu örnek, aynı sınıf adına sahip öğeleri kullanır (örneğimizde "şehir") ve farklı içeriği gizlemek ve görüntülemek için display:none ve display:block arasındaki stili değiştirir:
Örnek
<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>
Ve sekmeli içeriği açmak için bazı tıklanabilir düğmeler:
Örnek
<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>
Ve işi yapmak için bir JavaScript:
Örnek
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 Açıklaması
openCity () işlevi, kullanıcı menüdeki düğmelerden birine tıkladığında çağrılır.
İşlev, "city" ( display="none" ) sınıf adına sahip tüm öğeleri gizler ve belirtilen şehir adıyla ( display="block" ) öğeyi görüntüler;
Kapatılabilir Sekmeler
Londra
Londra, İngiltere'nin başkentidir.
Bir sekmeyi kapatmak için , sekme kabının içindeki bir öğeye onclick="this.parentElement.style.display='none'" ekleyin:
Örnek
<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>
Aktif/Geçerli Sekmesi
Kullanıcının bulunduğu sekmeyi/sayfayı vurgulamak için JavaScript'i kullanın ve etkin bağlantıya bir renk sınıfı ekleyin. Aşağıdaki örnekte, her bağlantıya bir "tablink" sınıfı ekledik. Bu şekilde, sekmelerle ilişkili tüm bağlantıları almak ve mevcut sekme bağlantısını vurgulamak için bir "w3-red" sınıfı vermek kolaydır:
Ö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";
}
Dikey Sekmeler
Örnek
<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>
Animasyonlu Sekme İçeriği
Sekme içeriğini soldurmak, yakınlaştırmak veya kaydırmak için w3-animate- sınıflarından 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>
Sekmeli Resim Galerisi
Bir resme tıklayın:
Örnek
<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>
Bir Izgaradaki Sekmeler
Üçüncü sütun düzeninde sekmeleri kullanma. Etkin sekmeye arka plan rengi yerine bir alt kenarlık eklediğimizi unutmayın: