Верстка табов на сайте (HTML CSS JS)

preview_player
Показать описание

Сегодня мы рассмотрим самый простой способ сделать табы (tabs) на сайте.

  1. WebDesign Master
  2. верстка
  3. верстка сайта
  4. верстка табов
  5. создание табов
  6. анимация табов
Рекомендации по теме
Верстка табов на 0:02:28

Верстка табов на сайте (HTML CSS JS)

Простые табы на 0:13:16

Простые табы на HTML и CSS. Как это сделать?

Делаем универсальные ТАБЫ 0:12:54

Делаем универсальные ТАБЫ с АКТИВНОЙ вкладкой! HTML, CSS, JS....

Как сделать ТАБЫ 0:11:25

Как сделать ТАБЫ у себя на сайте новичку? Cамый простой способ! HTML, CSS, JS....

Javascript практика. Создание 0:18:30

Javascript практика. Создание табов на javascript. Уроки JS

Создание вкладок (табов). 0:24:15

Создание вкладок (табов). Урок 1

Урок 9. Верстка 0:26:01

Урок 9. Верстка табов (разметка)

Создание вкладок на 0:13:09

Создание вкладок на чистом JavaScript

HTML/CSS Верстка нового 1:54:31

HTML/CSS Верстка нового проекта - 3 (табы на сайте)

Уроки JavaScript Практика 0:10:15

Уроки JavaScript Практика #5 Делаем вкладки табы (Tabs)

Уроки по Bootstrap 0:07:49

Уроки по Bootstrap 3 | #11 Создание вкладок (tabs)

Адаптивная верстка лендинга 1:05:20

Адаптивная верстка лендинга с нуля | Адаптивные табы | Переключение Swiper по табам...

JQUERY ТАБЫ - 1:53:52

JQUERY ТАБЫ - ВЕРСТКА РЕАЛЬНОГО ПРОЕКТА C НУЛЯ №10

HTML & CSS 0:15:28

HTML & CSS практика | Верстаем меню сайта

НАВИГАЦИЯ С ПОМОЩЬЮ 0:45:09

НАВИГАЦИЯ С ПОМОЩЬЮ ТАБОВ (ЭТАПЫ) - ВЕРСТКА РЕАЛЬНОГО ПРОЕКТА #6...

Создание простых вкладок 0:18:10

Создание простых вкладок (табов) на JS

Как сделать вкладки 0:19:19

Как сделать вкладки для HTML страницы на CSS и немного JS

Верстка сайта на 1:39:57

Верстка сайта на гридах с нуля №2 css grid верстка, табы на чистом JS...

HTML CSS верстка 7:50:13

HTML CSS верстка сайта главной страницы интернет-магазина Panto. Swiper, retina, CSS clamp, табы...

Адаптивная верстка сайта 0:46:58

Адаптивная верстка сайта из PSD. Как сделать табы на JS/jQuery. [2021] #3...

Онлайн-верстка html-шаблона (часть 0:55:35

Онлайн-верстка html-шаблона (часть 11). Табы-яваскрипт

Базовые элементы страницы 0:11:07

Базовые элементы страницы - Табы своими руками

JS-решения №21. Создаем 0:48:28

JS-решения №21. Создаем свой плагин для табов

HTML/CSS Верстка 2 1:21:43

HTML/CSS Верстка 2 проекта (3) Табы на сайте

Комментарии
Автор

Похоже лучший скрипт для табов, самое главное если на движок натягивать его никаких счетчиков прикручивать не понадобиться.

borbakborbakov
Автор

спасибо большое! искал простой и понятный скрипт! есть еще что то подобное?

L-Lesiv
Автор

Можете подсказать, зачем последняя строчка в коде? (.eq(0).addClass('active'))?

dbcyurt
Автор

HELP ME! У текущего таба красный цвет потому что к нему добавляется класс active, а как тогда у остальных табов (не текущих) прописать свой стиль? пробовал прописать в css файле для класса tab сини цвет, но тогда он перебивает красный т. е. класс active потом не работает. Я не знаю ни jquery.

battalov_u
Автор

я не понял, как он определяет допустим, вкладка 2 при нажатии на нее, как он определяет что именно надо вывести содержимое 2

jhzdlyd
Автор

минус 1н нельзя несколько добавить табов, приходится добавлять новый вызов менять классы и прочее

Zybpwnz