Лондон
Лондон является столицей Англии.
Это самый густонаселенный город в Соединенном Королевстве, с пригородами более 13 миллионов жителей.
Париж
Париж - столица Франции.
Область Париж является одним из самых крупных населенных центров в Европе, с более чем 12 миллионами жителей.
Токио
Токио является столицей Японии.
Это центр Большой Токио, и самый густонаселенный мегаполис в мире.
Вкладки (Табуляция)
Вкладки идеально подходят для одной странице веб-приложений или веб-страниц, способных отображать различные предметы.
Просто создать много элементов с одинаковым именем класса:
пример
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Затем добавить некоторые интерактивные кнопки, чтобы открыть содержимое (одиночные кнопки, панель навигации, sidenav, и т.п ..):
пример
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>И добавить JavaScript, чтобы выбрать элементы:
пример
openCity("London");
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 () , чтобы открыть "Лондон" (ID = "Лондон).
Затем вызовите открытый город () с другим именем города (ID = "Париж) , когда пользователь нажимает на одну из кнопок в меню.
Функция openCity () скрывает все элементы (дисплей = "нет") с именем класса "город", и отображает элемент (дисплей = "блок") с указанным идентификатором города.
Активный / Текущая вкладка
Если вы хотите, чтобы выделить текущую вкладку / страницу пользователь находится, используйте JavaScript и добавить определенный класс цвета к текущей ссылке вкладки. В приведенном ниже примере, мы добавили класс "tablink" для каждой ссылки. Таким образом, легко получить все ссылки, которые связаны с закладками, и дать текущую группу закладок ссылку на "W3-красный" класс, чтобы выделить его:
пример
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-sidenav w3-light-grey" style="width:130px">
<a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
<a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
<a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</nav>
Попробуй сам " Анимированные Tab Content
Используйте любой из классов 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> Попробуй сам " Вкладки в сетке
Использование вкладок в макете третьей колонке. Обратите внимание, что мы добавляем нижнюю границу к активной вкладке, а не цвет фона: