Вкладки навигации W3.CSS
Лондон
Лондон - столица Англии.
Это самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Навигация с вкладками
Навигация с вкладками — это способ навигации по веб-сайту.
Обычно в навигации с вкладками используются кнопки навигации (вкладки), расположенные вместе с выделенной вкладкой.
В этом примере используются элементы с одинаковым именем класса («город» в нашем примере) и меняется стиль между 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" );
Закрываемые вкладки
Лондон
Лондон — столица Англии.
Чтобы закрыть вкладку, добавьте 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="#" 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>
Вкладки в сетке
Использование вкладок в макете третьего столбца. Обратите внимание, что мы добавляем нижнюю границу к активной вкладке вместо цвета фона: