Таб в html это

How TO — Tabs

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects:

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Create Toggleable Tabs

Step 1) Add HTML:

Example

Create buttons to open specific tab content. All elements with class=»tabcontent» are hidden by default (with CSS & JS). When the user clicks on a button — it will open the tab content that «matches» this button.

Step 2) Add CSS:

Style the buttons and the tab content:

Example

/* Style the tab */
.tab overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
>

/* Style the buttons that are used to open the tab content */
.tab button background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
>

/* Change background color of buttons on hover */
.tab button:hover background-color: #ddd;
>

/* Create an active/current tablink class */
.tab button.active background-color: #ccc;
>

/* Style the tab content */
.tabcontent display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
>

Step 3) Add JavaScript:

Example

function openCity(evt, cityName) <
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with and hide them
tabcontent = document.getElementsByClassName(«tabcontent»);
for (i = 0; i < tabcontent.length; i++) tabcontent[i].style.display = "none";
>

// Get all elements with and remove the class «active»
tablinks = document.getElementsByClassName(«tablinks»);
for (i = 0; i < tablinks.length; i++) tablinks[i].className = tablinks[i].className.replace(" active", "");
>

// Show the current tab, and add an «active» class to the button that opened the tab
document.getElementById(cityName).style.display = «block»;
evt.currentTarget.className += » active»;
>

Fade in Tabs:

If you want to fade in the tab content, add the following CSS:

Example

.tabcontent <
animation: fadeEffect 1s; /* Fading effect takes 1 second */
>

/* Go from zero to full opacity */
@keyframes fadeEffect from
to
>

Show a tab by default

To open a specific tab on page load, use JavaScript to «click» on the specified tab button:

Example

Close a tab

If you want to close a specific tab, use JavaScript to hide the tab with a click of a button:

Example

Tip: Also check out How To — Vertical Tabs.

Источник

Что такое табы? Табы (вкладки) для сайта на CSS и JavaScript

Табы на своем сайте можно сделать на «чистом» CSS и на JavaScript. Каждый может выбрать себе наиболее подходящий способ.

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

С технической стороны, табы представляют собой ссылки и другие HTML-компоненты, которые скрыты от пользователя до момента их активации. Оформить табы можно как угодно: ограничение — полет вашей фантазии и навыков работы с CSS.

Табы CSS

Табы при помощи «чистого» CSS можно реализовать несколькими способами. Наиболее популярный способ — это реализация с использованием радиокнопок.

Допустим мы имеем вот такой HTML-код:

Вкладка 1

Вкладка 2

Вкладка 3

Информация, содержащаяся в первом табе.

Информация, содержащаяся во втором табе.

Информация, содержащаяся в третьем табе.

Код CSS тогда будет таким:

.mytabs

font-size: 0;

>

.mytabs>input[type=»radio»]

display: none;

>

.mytabs>div

/* изначально скрываем контент от пользователей */

display: none;

border: 2px solid #e5e5e5;

padding: 12px 20px;

font-size: 18px;

>

/* делаем видимым контент, который выбран пользователем в качестве активированной радиокнопки */

#mytab-button-1:checked~#mycontent-1,

#mytab-bbutton-2:checked~#mycontent-2,

#mytab-button-3:checked~#mycontent-3

display: block;

>

.mytabs>label

display: inline-block;

text-align: center;

vertical-align: middle;

user-select: none;

background-color: #f4f4f4;

border: 2px solid #e5e5e5;

padding: 4px 10px;

font-size: 18px;

line-height: 1.7;

transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;

cursor: pointer;

position: relative;

top: 2px;

>

.mytabs>label:not(:first-of-type)

border-left: none;

>

.mytabs>input[type=»radio»]:checked+label

background-color: #eee;

border-bottom: 1px solid #eee;

>

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

Табы CSS: псевдокласс «:target»

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

Допустим, мы имеем вот такой HTML-код:

Информация, содержащаяся в первой вкладке.

Информация, содержащаяся во второй вкладке.

Информация, содержащаяся в третьей вкладке.

Название первого таба

Название второго таба

Название третьего таба

Код CSS будет таким:

.mytabs

display: flex;

flex-direction: column;

>

.mytabs__links

display: flex;

width: 950%;

overflow-x: auto;

overflow-y: hidden;

margin-left: auto;

margin-right: auto;

margin-bottom: 12px;

order: 0;

white-space: nowrap;

background-color: #eee;

border: 2px solid #e3f5fd;

box-shadow: 0 3px 5px 0 #e3f5fd;

>

.mytabs__links>a

display: inline-block;

text-decoration: none;

padding: 8px 12px;

text-align: center;

color: #d5d5d5;

>

.mytabs__links>a:hover

background-color: rgba(225, 241, 252, 0.4);

>

.mytabs>#mycontent-1:target~.mytabs__links>a[href=»#mycontent-1″],

.mytabs>#mycontent-2:target~.mytabs__links>a[href=»#mycontent-2″],

.mytabs>#mycontent-3:target~.mytabs__links>a[href=»#mycontent-3″]

background-color: #bddefb;

cursor: default;

>

.mytabs>div:not(.mytabs__links)

display: none;

order: 1;

>

.mytabs>div:target

display: block;

>

Мы надеемся, что механизм работы такого способа организации табов вам понятен. Тут тоже визуально вы можете его оформлять как хотите. Если нужно, можете даже расположить табы вертикально.

Табы на чистом CSS делаются достаточно просто, если понимать, по какому принципу они выстраиваются. Но давайте по см отрим, как исполнить табы, используя возможности JavaScript.

Табы на JavaScript

Многие веб-разрабтчики утверждают, что для таких задач, как табы, лучше использовать CSS, так как таблицы стилей меньше нагружают веб-страницу, а JavaScript лучше использовать для более серьезных задач. Использовать или не использовать JavaScript для табов — это на ваше усмотрение, однако понимать, как их можно организовать было бы неплохо.

Допустим мы имеем вот такой HTML-код:

Название первого таба

Название второго таба

Название третьего таба

Информация, содержащаяся в первом табе.

Информация, содержащаяся во втором табе.

Информация, содержащаяся в третьем табе.

По логике, после написания HTML-кода должен присутствовать CSS. В данном примере мы не будем его описывать, потому что в нем должно содержаться только визуальное оформление ваших вкладок. Оформить их визуально вы можете самостоятельно. Но давайте посмотрим, каким будет JavaScript-код:

class ItcTabs

constructor(target, config)

const defaultConfig = <>;

this._config = Object.assign(defaultConfig, config);

this._elTabs = typeof target === ‘string’ ? document.querySelector(target) : target;

this._elButtons = this._elTabs.querySelectorAll(‘.mytabs__button’);

this._elPanes = this._elTabs.querySelectorAll(‘.mytabs__pane’);

this._eventShow = new Event(‘mytab.itc.change’);

this._init();

this._events();

>

_init()

this._elTabs.setAttribute(‘role’, ‘tablist’);

this._elButtons.forEach((el, index) =>

el.dataset.index = index;

el.setAttribute(‘role’, ‘mytab’);

this._elPanes[index].setAttribute(‘role’, ‘tabpanel’);

>);

>

show(elLinkTarget)

const elPaneTarget = this._elPanes[elLinkTarget.dataset.index];

const elLinkActive = this._elTabs.querySelector(‘.mytabs__btn_active’);

const elPaneShow = this._elTabs.querySelector(‘.mytabs__pane_show’);

if (elLinkTarget === elLinkActive)

return;

>

elLinkActive ? elLinkActive.classList.remove(‘mytabs__button_active’) : null;

elPaneShow ? elPaneShow.classList.remove(‘mytabs__pane_show’) : null;

elLinkTarget.classList.add(‘mytabs__button_active’);

elPaneTarget.classList.add(‘mytabs__pane_show’);

this._elTabs.dispatchEvent(this._eventShow);

elLinkTarget.focus();

>

showByIndex(index)

const elLinkTarget = this._elButtons[index];

elLinkTarget ? this.show(elLinkTarget) : null;

>;

_events()

this._elTabs.addEventListener(‘click’, (e) =>

const target = e.target.closest(‘.mytabs__button’);

if (target)

e.preventDefault();

this.show(target);

>

>);

Заключение

Сегодня мы рассмотрели, как можно организовать табы на чистом CSS и при помощи JavaScript. Как видно из статьи, табы на CSS организовать проще и код выглядит немного компактнее, а работать будут безупречно.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Источник

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

Узнайте, как сделать сайт с использованием табов и аккордеонов для удобной организации контента, с помощью HTML, CSS и JavaScript.

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

Табы

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

HTML

 
Таб 1 Таб 2 Таб 3 
 
Содержимое таба 1
 
Содержимое таба 2
 
Содержимое таба 3
 
 

CSS

.tabs < display: flex; >.tab-button < cursor: pointer; padding: 10px; border: none; background: #f1f1f1; font-size: 16px; >.tab-button:hover, .tab-button.active < background: #ccc; >.tab-content < padding: 20px; border: 1px solid #ccc; >.tab-panel < display: none; >.tab-panel.active

JavaScript

document.querySelectorAll('.tab-button').forEach(button => < button.addEventListener('click', () => < document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); button.classList.add('active'); document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active')); document.getElementById(button.dataset.target).classList.add('active'); >); >);

Аккордеоны

Аккордеоны – это вертикальные панели с раскрывающимся контентом, которые позволяют управлять видимостью разделов на странице.

HTML

 
Аккордеон 1 
Содержимое аккордеона 1
 Аккордеон 2 
Содержимое аккордеона 2
 Аккордеон 3 
Содержимое аккордеона 3
 
 

CSS

.accordion-button < cursor: pointer; padding: 10px; width: 100%; text-align: left; border: none; background: #f1f1f1; font-size: 16px; >.accordion-button:hover, .accordion-button.active < background: #ccc; >.accordion-panel < display: none; padding: 20px; border: 1px solid #ccc; border-top: none; >.accordion-panel.active

JavaScript

document.querySelectorAll('.accordion-button').forEach(button => < button.addEventListener('click', () => < button.classList.toggle('active'); button.nextElementSibling.classList.toggle('active'); >); >);

Теперь вы знаете, как создать сайт с использованием табов и аккордеонов 😊 Успехов в разработке!

Источник

Табуляция в HTML: 4 способа сделать отступ

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

Отдельного символа табуляции в HTML не существует, тем не менее, даже без специального кода или знака табуляции, есть много способов достичь нужного результата.

Основные способы сделать табуляцию

Способы сделать табуляцию в HTML:

• Используя CSS свойство margin-left .
• С помощью спецсимвола неразрывный пробел   .
• Несколькими пробелами внутри тега .
• Задать блоку CSS свойство white-space и использовать пробелы.

Примеры. Табуляция в HTML

Способ 1: Делаем отступ, например, 50 пикселей от левого края с помощью свойства CSS margin-left .

Способ 2: Используем специальный символ HTML   — неразрывный пробел. Каждый nbsp; равен одному пробелу и не будет игнорироваться браузером. Однако неразрывные пробелы не переносятся на следующую строку. Это следует учитывать, если табуляция делается как отступ внутри текста.

Способ 3: Пишем текст внутри тега . По умолчанию, браузеры не игнорируют пробелы внутри этого тега. Подробнее в статье: Тег HTML предварительно отформатированный текст.

Способ 4: Меняем у блока правило учета пробелов через CSS свойство white-space .

Каждый из этих способов будет работать. Какой больше подойдет в конкретном случае — решать вам. Мне в своей практике доводилось использовать все 4 способа табуляции, приведенные выше. Чаще всего использую CSS отступы и неразрывные пробелы.

Источник