Как сделать - Вкладки на всю страницу
Узнать, как создавать полные вкладки страниц, которые охватывают все окно браузера, с помощью CSS и JavaScript.
Вкладки на всю страницу
Нажмите на ссылки, чтобы отобразить "текущую" страницу:
Главная
Главная там, где сердце..
Новости
Какие новости в этот прекрасный день!
Контакт
Свяжитесь с нами или зайдите на чашечку кофе.
О Нас
Кто мы и чем занимаемся.
Создание вкладки на одной странице
Шаг 1) Добавить HTML:
Пример
<button class="tablink" onclick="openPage('Home', this, 'red')">Главная</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">Новости</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Контакт</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">О Нас</button>
<div id="Home" class="tabcontent">
<h3>Главная</h3>
<p>Главная там, где сердце..</p>
</div>
<div id="News" class="tabcontent">
<h3>Новости</h3>
<p>Некоторые новости в этот прекрасный день!</p>
</div>
<div id="Contact" class="tabcontent">
<h3>Контакт</h3>
<p>Свяжитесь с нами или зайдите на чашечку кофе.</p>
</div>
<div id="About" class="tabcontent">
<h3>О Нас</h3>
<p>Кто мы и чем занимаемся.</p>
</div>
Создание кнопок для открытия определенного содержимого вкладки. Все элементы <div> c class="tabcontent"
по умолчанию скрыты (с CSS & JS). Когда пользователь нажимает на кнопку - он откроет содержимое вкладки, которое "соответствует" этой кнопке.
Шаг 2) Добавить CSS:
Стиль ссылок и содержимого вкладки (полная страница):
Пример
/* Установите высоту тела и документа на 100%, чтобы включить "полные вкладки страницы" */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Стиль cсылок на вкладку */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Стиль содержимого вкладки (и добавить высоту: 100% для полного содержимого страницы) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
Шаг 3) Добавить JavaScript:
Пример
function openPage(pageName, elmnt, color) {
// Скрыть все элементы class="tabcontent" по умолчанию */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Удалите цвет фона всех ссылок/кнопок вкладок
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Показать содержимое конкретной вкладки
document.getElementById(pageName).style.display = "block";
// Добавить конкретный цвет кнопки, используемой для открытия содержимого вкладки
elmnt.style.backgroundColor = color;
}
// Получите элемент с id="defaultOpen" и нажмите на него
document.getElementById("defaultOpen").click();
Редактор кода »
Совет:Кроме того, проверить Как cделать - Вкладки.