W3.CSS tablar
Tabli navigatsiya
Tablar kontentni birma-bir ochiladigan alohida bo‘limlarga ajratadi.
W3.CSS tablarni bezash uchun klasslarni taqdim etadi, JavaScript esa tab kontentlari o‘rtasida almashish uchun ishlatiladi.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Tabli navigatsiya kontentning turli bo‘limlari o‘rtasida almashish uchun tugmalardan foydalanadi.
Quyidagi misolda barcha tab kontentlari uchun city klassi ishlatiladi.
JavaScript barcha tab kontentlarini yashiradi, so‘ng tanlangan shaharni ko‘rsatadi:
Misol
<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>
Tab kontentini ochish uchun tugmalar qo‘shing:
<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>
Barcha tablarni yashirish va tanlangan tabni ko‘rsatish uchun JavaScript’dan foydalaning:
function openCity(cityName) {
document.querySelectorAll(".city").forEach(city => {
city.style.display = "none";
});
document.getElementById(cityName).style.display = "block"; }
O‘zingiz sinab ko‘ring »
JavaScript tushuntirmasi
openCity() funksiyasi foydalanuvchi tab tugmasini bosganda ishga tushadi.
Funksiya city klassiga ega barcha elementlarni yashiradi, so‘ng tanlangan shaharni ko‘rsatadi.
Yopiladigan tablar
London
London is the capital city of England.
Tabni yopish uchun tab konteyneri ichidagi elementga onclick="this.parentElement.style.display='none'" qo‘shing:
Misol
<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>
O‘zingiz sinab ko‘ring »
Faol/joriy tab
Foydalanuvchi turgan joriy tab/sahifani ajratib ko‘rsatish uchun JavaScript’dan foydalaning va faol havolaga rang klassini qo‘shing. Quyidagi misolda har bir havolaga "tablink" klassini qo‘shdik. Shu tariqa tablarga tegishli barcha havolalarni olish va joriy tab havolasini ajratib ko‘rsatish uchun unga "w3-red" klassini berish oson bo‘ladi:
Misol
function openCity(evt, cityName) {
const cities = document.querySelectorAll(".city");
const tablinks = document.querySelectorAll(".tablink");
cities.forEach(city => {
city.style.display = "none";
});
tablinks.forEach(tablink => {
tablink.classList.remove("w3-red");
});
document.getElementById(cityName).style.display = "block";
evt.currentTarget.classList.add("w3-red");
}
O‘zingiz sinab ko‘ring »
Vertikal tablar
Misol
<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>
O‘zingiz sinab ko‘ring »
Animatsiyali tab kontenti
Tab kontentini asta paydo qilish, kattalashtirish yoki surib chiqarish uchun w3-animate-* klassidan foydalaning:
Misol
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
O‘zingiz sinab ko‘ring »
Tabli rasmlar galereyasi
Rasmlardan birini bosing:
Misol
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature" style="width:100%">
</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">X</span>
<div class="w3-display-bottomleft w3-container">Nature</div>
</div>
O‘zingiz sinab ko‘ring »
Grid ichidagi tablar
Bu misolda faol tabni ajratib ko‘rsatish uchun fon rangi o‘rniga qizil pastki chegara ishlatiladi:
Qatordagi tablar
Tablarni uch ustunli qatorga (Row) ham joylashtirish mumkin.
w3-third klassi qatorni uchta teng ustunga bo‘ladi.
601 pikseldan kichik ekranlarda uning kengligi 100% ga o‘zgaradi.
Effektni ko‘rish uchun sahifa o‘lchamini o‘zgartiring.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!