Как сделать табы на: чистом CSS / чистом JS / грязном jQuery?

В этом видео вы увидите 4! способа реализации Табов (ещё их называют Вкладками).
Я покажу 2 способа реализации на CSS (Первый с использованием input и ~, второй с :target), потом будет на jQuery и завершает хит-парад - JavaScript.

=======================================

Содержание:
00:00 Введение
00:22 Табы на CSS (input и ~)
08:02 Табы на CSS (:target)
14:10 Табы на jQuery
21:08 Табы на JavaScript

[prosto_razrabotka]

Можете добавиться в друзья:

А так же, подписаться на страницы:

[pavelp]

Спасибо за объяснения человеческим языком!
Нет серьёзно, чтобы верстальщик, программист объяснял так, чтобы это было понятно - это большая редкость.
Особенно ценно ток, как автор осуществляет последовательный перевод с языка програмированния JS (да с CSS) на обычный (нормальный) человеческий.

[ctehwsm]

Крутая подача, очень положительный и душевный персонаж. Спасибо большое, мне как новичку, все понятно) почти)

[pwdfwhl]

Всё прикольно, конечно) но хотелось бы уроки по чистому js, чтобы не бегать от одного ресурса к другому

[fflcetu]

Спасибо за невероятно полезные уроки на этом крутом канале

[dpxctxn]

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

[skyshotmusichannel]

Ну что могу сказать. Супер. Коротко и по делу. Ничего лишнего и все понятно

[akbarmansurov]

Топ !!! Полгода не мог найти нормальных Табов. Однозначно Лайк, Подписка!!!

[nataliiachaikovska]

Очень интересный урок!
Благодарю за отличный труд :)

[caydebane]

Большое тебе братское СПАСИБО! Братка.

[nhpwzec]

Я прям видел это смущение после первого слова jQuery))) Давай по нему урок)

[Kirill-khkt]

Хотелось бы про анимации параллакс, например

[Dim_Dimych]

Классное видео. Собирался учить JS, но многие плагины и видеоуроки на ютубе выполнены на JQ. И голова постепенно наполняется кашей из 2х языков. Спасибо, что по вашему уроку видно отличия языков.

[tbmmdlz]

😇Мне вообще нравятся встроенные способы что не использовать JS каждый раз

[Asver_]

Виталий, спасибо за урок. Было очень познавательно. Буду ждать такие уроки. На просторах Ютуба очень мало уроков по практическому использованию HTML, CSS и JS. И ещё хотелось бы увидеть подробный урок по использованию постпроцессора PostCSS.

[mlrnvxs]

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

[minusvetal]

Привет - такой ВОПРОС - задумка сделать поле с табами - с ЛЕВОЙ стороны горизонтальные табы (4-5шт) - при переходе по табу опа - поле с ВЕРТИКАЛЬНЫМИ табамы и там можно поклацать по ВЕРТИКАЛЬНЫМ табам (не выходя из горизонтального таба) и посмотреть что там есть. Горизонтальный таб открывает 4-5 вертикальных табов. Выходит: слева горизонтальный таб - по центру вертикальный таб... Ну как то так )))

[zdydgfh]

Виталий кодил табы, но непослушный автофокус упрямо снимал стул)

[unclechernomor]

жаль что автор завязал с контентом, очень нравится манера и подача

[vladrudenk]

Помогите
Что делать если у меня при нажатии курсором на свободную область переход работает, а если нажимать на текст, то нет ( делал по видео на js)