Html как сделать табы

W3.CSS Navigation Tabs

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.

Tabbed Navigation

Tabbed navigation is a way to navigate around a website.

Normally, tabbed navigation uses navigation buttons (tabs) arranged together with the selected tab highlighted.

This example uses elements with the same class name («city» in our example) , and changes the style between display:none and display:block to hide and display different content:

Example

And some clickable buttons to open the tabbed content:

Example

And a JavaScript to do the job:

Example

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 Explained

The openCity() function is called when the user clicks on one of the buttons in the menu.

The function hides all elements with the class name «city» (display=»none»), and displays the element with the given city name (display=»block»);

Closable Tabs

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

To close a tab, add onclick=»this.parentElement.style.display=’none'» to an element inside the tab container:

Example

Active/Current Tab

To highlight the current tab/page the user is on, use JavaScript and add a color class to the active link. In the example below, we have added a «tablink» class to each link. That way, it is easy to get all links that is associated with tabs, and give the current tab link a «w3-red» class, to highlight it:

Example

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»;
>

Vertical Tabs

Example

Animated Tab Content

Use any of the w3-animate-classes to fade, zoom or slide in tab content:

Example

Tabbed Image Gallery

×

×

×

×

Example

Tabs in a Grid

Using tabs in a third column layout. Note that we add a bottom border to the active tab, instead of a background color:

Источник

Как сделать вкладки в HTML

Сегодня мы создадим три вкладки (tabs), переключаясь между которыми, поочередно будет скрываться или снова показываться, содержимое всех вкладок.

В каких случаях целесообразно размещать контент на сайте во вкладках?

Первая причина – в целях экономии места на странице. Вторая причина – когда содержимое сайта разнородное. В большинстве случаев, обе причины, склоняют нас к использованию вкладок (табов) на сайте.

Я знаю, что начинающие веб-разработчики, «шарахаются» от нативного способа (с применением JS) делать подобные вкладки. Предпочитая, не вникать в технические детали, хватаются за готовый плагин на jQuery (смотрите урок по Easytabs) или берут готовый компонент на Bootstrap.

Однако этот урок посвящается тем смельчакам, которые не прячут голову в песок, а хотят разобраться в механизме переключения между вкладками. Особенно, урок будет полезен изучающим JavaScript. Пользуясь случаем, не могу не посоветовать видео-курс по JavaScript.

Демонстрация вкладок

HTML код вкладки

Внутри контейнера див с классом tab, создадим 3 кнопки-ссылки (названия городов) с классом tablinks, заранее повесим на кнопки события по клику и дадим название функции openCity. При клике по кнопке отработает эта функция, первым аргументом события будет — event.

Дальше создадим три блока с контентом для каждого таба, каждому блоку присвоим ID для получения нужных элементов и классы для стилизации их.

CSS код вкладки

Комментарии для CSS кода

1) Зададим для блока с классом tab контейнера цвет фона и рамку.
2) Сделаем кнопки-переключатели button с тем же фоном, без рамок, с отступами для названий городов и плавным переходом.
3) Поменяем цвет фона при наведении на кнопки button:hover.
4) Зададим цвет фона и цвет ссылки для активной кнопки вкладки button.active.
5) Сделаем блоки с контентом tabcontent невидимыми с отсутствующей верхней рамкой.

JS код вкладки

Комментарии для JS кода

1) Объявим все переменные.
2) Получим все элементы с классом tabcontent и спрячем их.
3) Получим все элементы с классом tablinks и удалим активный класс.
4) Покажем текущую вкладку и добавим активный класс на кнопку, которая откроет вкладку с ID по названию города.

Создано 03.12.2018 10:02:31

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

Очень понравился материал. Но я новичок в этом деле и мне не совсем понятно, как сделать, чтобы при открытии страницы по умолчанию была активна первая вкладка и чтобы она была раскрыта.

Впервые вижу чтобы идентификаторы писали кириллицей, весь код должен быть на английском.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Как создать сайт с использованием табов для переключения контента

В данной статье мы рассмотрим, как создать сайт с использованием табов для переключения контента. Табы — это удобный способ организации информации на веб-странице, позволяющий разделить контент на несколько секций и отображать их по очереди при нажатии на соответствующие вкладки.

HTML-структура

Для создания табов нам потребуется следующая HTML-структура:

Здесь мы создали контейнер с классом tabs , содержащий список вкладок tab-list и контейнер с контентом tab-content . Каждая вкладка имеет атрибут data-tab , соответствующий идентификатору соответствующего контента.

CSS-стили

Теперь добавим немного стилей для наших табов:

.tabs < width: 100%; display: inline-block; >.tab-list < padding: 0; margin: 0; list-style: none; >.tab-item < display: inline-block; margin-right: 10px; padding: 10px; cursor: pointer; background-color: #f1f1f1; border-radius: 5px 5px 0 0; >.tab-item.active < background-color: #fff; >.tab-content < border: 1px solid #f1f1f1; padding: 20px; border-radius: 5px; >.tab-pane < display: none; >.tab-pane.active

Эти стили задают базовую стилизацию для нашей структуры табов, делая их более приятными для глаза 😉.

JavaScript-логика

Наконец, добавим небольшой скрипт, который будет отвечать за переключение контента при нажатии на вкладки:

document.addEventListener('DOMContentLoaded', function() < var tabItems = document.querySelectorAll('.tab-item'); tabItems.forEach(function(tab) < tab.addEventListener('click', function() < var tabId = this.getAttribute('data-tab'); var content = document.getElementById(tabId); // Удаляем активный класс у текущих вкладок и контента document.querySelector('.tab-item.active').classList.remove('active'); document.querySelector('.tab-pane.active').classList.remove('active'); // Добавляем активный класс для выбранной вкладки и контента this.classList.add('active'); content.classList.add('active'); >); >); >);

Этот скрипт добавляет обработчик событий для каждой вкладки, который при нажатии удаляет активный класс у текущих вкладок и контента, а затем добавляет его для выбранной вкладки и соответствующего контента.

Теперь у вас есть функциональный сайт с использованием табов для переключения контента! 🎉

Не забывайте продолжать изучать веб-разработку и практиковаться в создании различных элементов. Успехов вам в обучении!

Источник

Создание вкладок при помощи HTML и CSS

В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.

Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.

При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.

Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.

Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:

Размеры содержимого вкладок

могут отличаться по высоте!

Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление также можно легко изменить.

При создании вкладок HTML разметка вкладок выглядит следующим образом:

Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами и добавьте следующие стили оформления:

< style type = "text/css" >
. tabs < width : 100 %; padding : 0px ; margin : 0 auto ; >
. tabs > input < display : none ; >
. tabs > div display : none ;
padding : 12px ;
border : 1px solid #C0C0C0;
background : #FFFFFF;
>
. tabs > label display : inline — block ;
padding : 7px ;
margin : 0 — 5px — 1px 0 ;
text — align : center ;
color : #666666;
border : 1px solid #C0C0C0;
background : #E0E0E0;
cursor : pointer ;
>
. tabs > input : checked + label color : #000000;
border : 1px solid #C0C0C0;
border — bottom : 1px solid #FFFFFF;
background : #FFFFFF;
>
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 < display: block; >

В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.

Источник