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

  Переглядів 25,791

Просто: разработка

Просто: разработка

День тому

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

КОМЕНТАРІ: 112
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@pavelp7148
@pavelp7148 3 роки тому
Спасибо за объяснения человеческим языком! Нет серьёзно, чтобы верстальщик, программист объяснял так, чтобы это было понятно - это большая редкость. Особенно ценно ток, как автор осуществляет последовательный перевод с языка програмированния JS (да с CSS) на обычный (нормальный) человеческий.
@user-tb3mm6dl3z
@user-tb3mm6dl3z 10 місяців тому
Один из лучших каналов по разработке
@user-ct5eh2ws9m
@user-ct5eh2ws9m 3 роки тому
Крутая подача, очень положительный и душевный персонаж. Спасибо большое, мне как новичку, все понятно) почти)
@user-tb3mm6dl3z
@user-tb3mm6dl3z 10 місяців тому
😅сам ты персонаж
@user-ff3lc1et3u
@user-ff3lc1et3u 3 роки тому
Спасибо за невероятно полезные уроки на этом крутом канале
@looking_at_the_sky
@looking_at_the_sky 11 місяців тому
Спасибо за ценный урок!😉
@skyshotmusichannel9326
@skyshotmusichannel9326 2 роки тому
Ну что могу сказать. Супер. Коротко и по делу. Ничего лишнего и все понятно
@zizzxiii2714
@zizzxiii2714 3 роки тому
Спасибо большое за урок!
@nataliiachaikovska9579
@nataliiachaikovska9579 3 роки тому
Очень интересный урок! Благодарю за отличный труд :)
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо)
@bessonniy9208
@bessonniy9208 2 роки тому
Огромнейшее спасибо!
@SergiiBespalko
@SergiiBespalko 4 роки тому
Агонь 💪, спасибо
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Круто!)
@akbarmansurov1545
@akbarmansurov1545 2 роки тому
Топ !!! Полгода не мог найти нормальных Табов. Однозначно Лайк ,Подписка!!!
@user-pw6df6wh1l
@user-pw6df6wh1l 4 роки тому
Всё прикольно, конечно) но хотелось бы уроки по чистому js, чтобы не бегать от одного ресурса к другому
@caydebane6753
@caydebane6753 3 роки тому
Большое тебе братское СПАСИБО! Братка.
@RomanSimonenko
@RomanSimonenko 2 роки тому
Подача супер!
@user-dp8xc9tx8n
@user-dp8xc9tx8n 2 роки тому
четко. У себя на проекте использую третий вид
@user-nh3pw8ze5c
@user-nh3pw8ze5c 3 роки тому
Я прям видел это смущение после первого слова jQuery))) Давай по нему урок)
@Vladislav1449
@Vladislav1449 2 роки тому
Спасибо!
@saluteismyname
@saluteismyname Рік тому
Спасибо!!!
@luxarmiger5729
@luxarmiger5729 2 роки тому
От души!
@Kirill-kh3kt
@Kirill-kh3kt 4 роки тому
Хотелось бы про анимации параллакс, например
@artemsmirnoff9821
@artemsmirnoff9821 4 роки тому
Круто!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо -)
@Asver_
@Asver_ 4 роки тому
Виталий, спасибо за урок. Было очень познавательно. Буду ждать такие уроки. На просторах Ютуба очень мало уроков по практическому использованию HTML, CSS и JS. И ещё хотелось бы увидеть подробный урок по использованию постпроцессора PostCSS.
@KrasavchikSelivan
@KrasavchikSelivan 3 роки тому
На самом деле таких уроков очень много, за всю жизнь все не пересмотришь
@user-ll2ps8mv6o
@user-ll2ps8mv6o Рік тому
Спасибо тебе
@Dim_Dimych21
@Dim_Dimych21 3 роки тому
Классное видео. Собирался учить JS, но многие плагины и видеоуроки на ютубе выполнены на JQ. И голова постепенно наполняется кашей из 2х языков. Спасибо, что по вашему уроку видно отличия языков.
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Это один язык - JavaScript. JQuery лишь библиотека. Которая в свою очередь написана на JavaScript
@yedil_myrza
@yedil_myrza 3 роки тому
Спасибо
@headspase2585
@headspase2585 3 роки тому
Заметил то что вы прописываете стили для класса тега и у вас они применяются, но у меня нет и многих тоже что это за фокус ?
@foraxxx
@foraxxx 3 роки тому
видео помогло, спасибо большое. Только я не понял, почему у активного таба(у ссылки) нельзя поменять свойства текста, я менял - не менялись. background меняется, подчёркивание появляется, а размер и цвет текста нет. делал на js
@user-lc8vs4pb9z
@user-lc8vs4pb9z 4 роки тому
Выводим в тренды
@user-ml7rn3vx6s
@user-ml7rn3vx6s 4 роки тому
Зачем в всех элементов удалять класс если можно находить в контейнере активный класс и удалять его. В другом случае можно было использовать дилигирование событий чтобы не навешивать на каждый элемент событие и это ускорит работу сайта если таких табов будет много.
@headspase2585
@headspase2585 3 роки тому
Запиши пожалуйста свою версию, интересно посмотреть)
@igorshcherba1418
@igorshcherba1418 3 роки тому
Да, согласен! единственное, что убило (твой абсолютно правильный) коммент так это написание слова делегирование. но зато js ты знаешь лучше чем этот чел из IBM !!!
@user-tb3mm6dl3z
@user-tb3mm6dl3z 10 місяців тому
😇Мне вообще нравятся встроенные способы что не использовать JS каждый раз
@ruvim6885
@ruvim6885 4 роки тому
что думаешь про Vue js?
@vladrudenk0
@vladrudenk0 Рік тому
Помогите Что делать если у меня при нажатии курсором на свободную область переход работает, а если нажимать на текст, то нет ( делал по видео на js)
@sanychleha974
@sanychleha974 4 роки тому
Спасибо за видео) Только не совсем понял зачем в реализации на чистом JS использовать getElementById и затем убирать решетку из href, если можно также через querySelector выбрать элемент.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
По querySelector находится только первый элемент, а если заюзать querySelectorAll - то найдутся все элементы и среди них нужно искать подходящий по айди, классу или какому-то другому свойству. А вот с помощью getElementById мы говорим сразу, конкретно вот ЭТО покажи.
@SeverHolod
@SeverHolod 3 роки тому
@@prosto_razrabotka дк айди уникальный и висит только у одного элемента. querySelector и querySelectorAll найдут необходимый контент по айдишнику
@goldovyidozhdik3430
@goldovyidozhdik3430 2 роки тому
Здравствуйте, а может кто объяснить разницу? Почему когда отслеживаем click автор использует forEach(item), а вот когда делает remove то forEach(child)? Хочется разобраться а не просто копипастить.
@elatishev8007
@elatishev8007 4 роки тому
отличное видео, спасибо за контент! Очень бы хотелось узнать как несложно реализовать скроллбар, инфы в интернете, понятной новичкам совсем мало...
@elatishev8007
@elatishev8007 3 роки тому
@@stasalsakhanov435 спасибо, обязательно попробую)
@alexeygumenyuk8510
@alexeygumenyuk8510 3 роки тому
У меня одного табы с гитарой ассоциациируется, а не со вкладками?)
@alexbugg2167
@alexbugg2167 4 роки тому
Ты крутой! Сделай пожалуйста ещё про акардеон, желательно на чистом js
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Скоро! -) Через 2 недели по плану.
@user-zd2yd8gf5h
@user-zd2yd8gf5h 4 роки тому
Виталий кодил табы, но непослушный автофокус упрямо снимал стул)
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Подголовник блестит так же, как и лысина, вот он и сбивается -)
@victorsiber2911
@victorsiber2911 3 роки тому
а как при первом варианте после ~ подняться на уровень вверх вложенности?
@xOceanSpirit
@xOceanSpirit 2 роки тому
Вверх никак. Ты должен отталкиваться либо от родителя, либо от соседа и двигаться вглубь. Наверх нельзя никак.
@unclechernomor4421
@unclechernomor4421 Рік тому
жаль что автор завязал с контентом, очень нравится манера и подача
@sarwogame4465
@sarwogame4465 Рік тому
Не пойму с чем связанно делал всё в точности по видео но табы в html и css не работают
@nonenone6980
@nonenone6980 3 роки тому
подскажите плиз у меня в .tabs__item есть span/ и вот при нажатии на span не срабатывает onclick. как пофиксить? js спасибо
@AndreiAlioshyn
@AndreiAlioshyn 2 роки тому
У меня такая же проблема была. Просто переделал без "span". Спасибо за наводку!
@kuznetsovs
@kuznetsovs 3 роки тому
Просто: разработка, подскажите пожалуйста! Если на странице несколько табов (JS) как быть? Как сделать чтобы они работали независимо?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Сделать инициализацию через класс, например. И работать по классам по уровню вверх-вниз
@kuznetsovs
@kuznetsovs 3 роки тому
@@prosto_razrabotka :( А на практике? Я в JS никакой, только начинаю.
@minusvetal
@minusvetal 2 роки тому
Привет - такой ВОПРОС - задумка сделать поле с табами - с ЛЕВОЙ стороны горизонтальные табы (4-5шт) - при переходе по табу опа - поле с ВЕРТИКАЛЬНЫМИ табамы и там можно поклацать по ВЕРТИКАЛЬНЫМ табам (не выходя из горизонтального таба) и посмотреть что там есть. Горизонтальный таб открывает 4-5 вертикальных табов. Выходит: слева горизонтальный таб - по центру вертикальный таб... Ну как то так )))
@prosto_razrabotka
@prosto_razrabotka 2 роки тому
И? Задачу вижу. Вопрос нет.
@headspase2585
@headspase2585 3 роки тому
Повторил последний способ, классы для заголовков прописываются а для контента не работают, как быть? в консоль выводит ошибку в последней строке.
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
С ошибкой в телеграм чат
@Maiq-The_Liar
@Maiq-The_Liar 4 роки тому
Сори за оффтоп... Кресло выглядит удобным. Подскажите название, плз.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Samurai. Но при выборе кресла важно учитывать рост, вес, материал и ряд других факторов.
@Maiq-The_Liar
@Maiq-The_Liar 4 роки тому
@@prosto_razrabotka благодарю. Я для длительной работы взял игровое около года назад, но шея все равно устает, т.к. там не регулируется подголовник по горизонтали. Но не искал ничего другого, т.к. думал, что уже пользуюсь вершиной кресельного искусства. Теперь понял, что изначально в запросе должно было быть слово "эргономическое", а не "удобное" :)
@borislihachev8325
@borislihachev8325 3 роки тому
А как бы сделать плавное переключение табов )
@user-sz8qw4yp3f
@user-sz8qw4yp3f 3 роки тому
Анимации в помощь)
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Какая версия табов вам наиболее близка?
@UrumovKonstantin
@UrumovKonstantin 4 роки тому
Конечно последняя!
@sanychleha974
@sanychleha974 4 роки тому
Последняя. Для такой задачи, наверное, не стоит тащить за собой целый jquery)
@user-hk3zz3oi8b
@user-hk3zz3oi8b 4 роки тому
Можно ещё сделать по data-атрибутам. И вместо ссылок использовать кнопки.
@kotlancer
@kotlancer 4 роки тому
Третье) не было ещё проектов без подключения плагинов, которые бы не использовали jQuery. Поэтому не вижу смысла мучаться
@headspase2585
@headspase2585 3 роки тому
А какая самая правильная с точки зрения опытного разработчика?
@SevTylen
@SevTylen 4 роки тому
В каком редакторе код пишешь?
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
VS Code
@timmyboy1687
@timmyboy1687 3 роки тому
How to override #tab-1(higher priority selector) with .tabs-content__item {display:none;} My content still displayed instead of being invisible. Spasibo!
@chikenmacnugget
@chikenmacnugget 4 роки тому
Ребят, я только учусь js и опыта боевого у меня нет, но мне почему-то кажется, что вешать столько функций и циклов в цикле с функцией это не очень хорошая затея для такой достаточно простой задачи. Если я не прав, то поправьте меня и объясните пожалуйста)
@george_m641
@george_m641 3 роки тому
Ну во первых функций не много, во вторых они все простые , и в 3 скорее всего меньше не получится ,если хочешь точно такой же результат
@tomirisibrahim8170
@tomirisibrahim8170 3 роки тому
Cannot read property 'classList' of null точно как вы делаю не понимаю в чем дело ((
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
О чем говорит ошибка?
@user-bj6mx9rf2b
@user-bj6mx9rf2b 3 роки тому
Если делать табы на грязном jquery, можно ли в блок .tabs-content__item, вставлять другие блоки помимо текста?
@Kristina-dz9ve
@Kristina-dz9ve 3 роки тому
Вот смотрю кучу уроков, пожалуйста хоть кто-то расскажите как сделать так, чтоб ссылка работала на определенный якорь. У меня 10 табов и мне нужно дать на определенный таб ссылку.
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
В этом же видео, реализация через target...
@kirillriman3611
@kirillriman3611 4 роки тому
Грязный JQuery xD
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Немножко дикого запада -)
@amirych
@amirych 4 роки тому
Теперь надо сделать через class сделать
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Ага, а ещё на реакте, ангуляре, вью... -)
@amirych
@amirych 4 роки тому
@@prosto_razrabotka Да нее) Чтоб можно было переиспользовать.
@amirych
@amirych 4 роки тому
Ура, ванильный js
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Да, в некотором смысле ты меня подтолкнул к этому -) Но я решил это сделать по-своему и дабы не обидеть никого решил делать во всех вариациях -)
@amirych
@amirych 4 роки тому
@@prosto_razrabotka Очень приятно что автор уделяет внимание просьбам подписчиков)
@vikpass1033
@vikpass1033 2 роки тому
ещё бы ссылочку на гитхаб
@afonchenkovdmitrii6420
@afonchenkovdmitrii6420 3 роки тому
Что самое смешное, я вижу как люди тут плюются на jQuery, но не вижу комента о том, что именно вариант на jQuery лучше, т.к. нативный сделан на новых версиях JS и не поддерживается IE(последние версии)
@alym.aleksey
@alym.aleksey 3 роки тому
про babel слышал?
@afonchenkovdmitrii6420
@afonchenkovdmitrii6420 3 роки тому
@@alym.aleksey конечно слышал, вот только интересно, слышал ли ты про минусы бабеля)
@alym.aleksey
@alym.aleksey 3 роки тому
@@afonchenkovdmitrii6420 нет, напиши вкратце какие там минусы, которые могут заставить разработчиков отказаться от него. Которые смогут перекрыть плюсы
@afonchenkovdmitrii6420
@afonchenkovdmitrii6420 3 роки тому
@@alym.aleksey, один и самый весомый. Он может спокойно наговнокодить. Если уж и использовать что-то под нужды кроссбраузерности, то ts. А jquery удобна своей простотой, но и у неё есть минусы.
@alym.aleksey
@alym.aleksey 3 роки тому
@@afonchenkovdmitrii6420 ясно. Удачи с таким подходом
@user-zd2yd8gf5h
@user-zd2yd8gf5h 4 роки тому
Эх, уроков бы по реакт+редакс бы еще). Ведь мало кто уже пользуется ванильными "тремя китами" в разработке. На фрилансе разве что для небольших сайтиков
@scythecult
@scythecult 3 роки тому
Когда автор начал использовать метод replace, во всем этом многообразии говнокода, мысленно поставил +rep.
@alym.aleksey
@alym.aleksey 3 роки тому
зачем? если у него есть четкое представление, что будешь хеш, можно просто slice(1)
@clleoweb4083
@clleoweb4083 3 роки тому
Хреф.. .. ептеть...
@shazu3270
@shazu3270 Рік тому
ну бл зачем мне смотреть все видео, чтобы понять как сделать это на native js? Какой смысл пихать все в одно видео и говорить "делаем также" "повторим тоже самое"...................................
@privet_baget
@privet_baget 4 роки тому
Единственный вопрос - нахрена изобретать велосипед, когда все элементы интерфейса давно и качественно разработаны и доступны. Бери любой фрэймворк и кастомизируй под свои потребности и нужды.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Конечно... Бери любой фреймворк и грузи сотни килобайт, только потому что сам не в силах написать 10 строк необходимого кода...
@privet_baget
@privet_baget 4 роки тому
@@prosto_razrabotka Вопрос то не в том, что не в состоянии написать 10 строк кода. Зачем тратить на это драгоценное время, и пилить что-то, что может оказаться еще и потенциально багнутым? Предлагаете в 2020 году экономить килобайты? Серьезно? Чтобы что? За это даже гугл спид инсайтс не похвалит)
@user-ey1eq4ch4j
@user-ey1eq4ch4j 3 роки тому
@@privet_baget Продолжу вашу мысль в ту же сторону. Фреймворки, знание PHP и т.д. тоже не нужны! Бери любой конструктор, и лепи сайт. Да, конструкторы убоги, и на них нельзя реализовать что-то за пределами их примитивного функционала. Зато - какая экономия времени! Между прочим, все сказанное - строго в рамках вашей логики. :)
@ok_kov
@ok_kov 2 роки тому
@@privet_baget а что непонятного? Просто нужны просмотры на ютуп. Деньги правят миром.
@olegbychkov606
@olegbychkov606 Рік тому
Спасибо!
Как сделать видеофон на сайте?
5:58
Просто: разработка
Переглядів 13 тис.
Піхотинець - про рутину на фронті
00:46
Суспільне Новини
Переглядів 1,2 млн
Can You Draw The PERFECT Circle?
00:57
Stokes Twins
Переглядів 43 млн
Как сделать Плагин на JS?
36:20
Просто: разработка
Переглядів 7 тис.
How To Make Toggle Button Using HTML & CSS
5:27
MakeTechStuff
Переглядів 60 тис.
Scroll to top
16:02
Просто: разработка
Переглядів 14 тис.
Простые табы на HTML и CSS. Как это сделать?
13:16
Фрілансер по життю
Переглядів 89 тис.
Верстка звездатого рейтинга
8:36
Просто: разработка
Переглядів 14 тис.
Учим jQuery за 30 минут. Начало.
8:56
Glo Academy
Переглядів 91 тис.
Піхотинець - про рутину на фронті
00:46
Суспільне Новини
Переглядів 1,2 млн