W3.CSS Вкладки навігації
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.
Навігація з вкладками
Навігація з вкладками – це спосіб навігації вебсайтом.
Зазвичай для навігації з вкладками використовуються навігаційні кнопки (вкладки), розташовані разом із виділеною вкладкою.
У цьому прикладі використовуються елементи з однаковою назвою класу ("city" у нашому прикладі) і змінюється стиль між 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>
І JavaScript для роботи:
Приклад
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");
Вкладки, що закриваються
London
London is the capital city of England.
Щоб закрити вкладку, додайте 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="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>
Спробуйте самі »
Вкладки в сітці
Використання вкладок у макеті третього стовпця. Зауважте, що ми додаємо нижню межу до активної вкладки замість кольору фону:
