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.
Навігація з вкладками
Навігація з вкладками – це спосіб навігації вебсайтом.
Зазвичай для навігації з вкладками використовуються навігаційні кнопки (вкладки), розташовані разом із виділеною вкладкою.
У цьому прикладі використовуються елементи з однаковою назвою класу ("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>
Спробуйте самі »
Вкладки в сітці
Використання вкладок у макеті третього стовпця. Зауважте, що ми додаємо нижню межу до активної вкладки замість кольору фону:
