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

Рет қаралды 25,841

Күн бұрын

В этом видео вы увидите 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 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 3 жыл бұрын

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

@user-ff3lc1et3u 3 жыл бұрын

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

@user-ct5eh2ws9m 3 жыл бұрын

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

@user-tb3mm6dl3z 11 ай бұрын

😅сам ты персонаж

@akbarmansurov1545 2 жыл бұрын

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

@skyshotmusichannel9326 2 жыл бұрын

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

@nataliiachaikovska9579 3 жыл бұрын

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

@prosto_razrabotka 3 жыл бұрын

Спасибо)

@zizzxiii2714 3 жыл бұрын

Спасибо большое за урок!

@looking_at_the_sky Жыл бұрын

Спасибо за ценный урок!😉

@user-tb3mm6dl3z 11 ай бұрын

Один из лучших каналов по разработке

@bessonniy9208 3 жыл бұрын

Огромнейшее спасибо!

@SergiiBespalko 4 жыл бұрын

Агонь 💪, спасибо

@prosto_razrabotka 4 жыл бұрын

Круто!)

@caydebane6753 3 жыл бұрын

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

@user-nh3pw8ze5c 3 жыл бұрын

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

@user-pw6df6wh1l 4 жыл бұрын

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

@RomanSimonenko 2 жыл бұрын

Подача супер!

@user-dp8xc9tx8n 2 жыл бұрын

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

@Asver_ 4 жыл бұрын

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

@KrasavchikSelivan 4 жыл бұрын

На самом деле таких уроков очень много, за всю жизнь все не пересмотришь

@Dim_Dimych21 3 жыл бұрын

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

@prosto_razrabotka 3 жыл бұрын

Это один язык - JavaScript. JQuery лишь библиотека. Которая в свою очередь написана на JavaScript

@saluteismyname Жыл бұрын

Спасибо!!!

@artemsmirnoff9821 4 жыл бұрын

Круто!

@prosto_razrabotka 4 жыл бұрын

Спасибо -)

@Vladislav1449 2 жыл бұрын

Спасибо!

@luxarmiger5729 2 жыл бұрын

От души!

@Kirill-kh3kt 4 жыл бұрын

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

@headspase2585 3 жыл бұрын

Заметил то что вы прописываете стили для класса тега и у вас они применяются, но у меня нет и многих тоже что это за фокус ?

@user-ll2ps8mv6o Жыл бұрын

Спасибо тебе

@user-tb3mm6dl3z 11 ай бұрын

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

@yedil_myrza 3 жыл бұрын

Спасибо

@ruvim6885 4 жыл бұрын

что думаешь про Vue js?

@foraxxx 3 жыл бұрын

видео помогло, спасибо большое. Только я не понял, почему у активного таба(у ссылки) нельзя поменять свойства текста, я менял - не менялись. background меняется, подчёркивание появляется, а размер и цвет текста нет. делал на js

@elatishev8007 4 жыл бұрын

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

@elatishev8007 4 жыл бұрын

@@stasalsakhanov435 спасибо, обязательно попробую)

@user-lc8vs4pb9z 4 жыл бұрын

Выводим в тренды

@user-zd2yd8gf5h 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Подголовник блестит так же, как и лысина, вот он и сбивается -)

@alexbugg2167 4 жыл бұрын

Ты крутой! Сделай пожалуйста ещё про акардеон, желательно на чистом js

@prosto_razrabotka 4 жыл бұрын

Скоро! -) Через 2 недели по плану.

@vladrudenk0 Жыл бұрын

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

@goldovyidozhdik3430 2 жыл бұрын

Здравствуйте, а может кто объяснить разницу? Почему когда отслеживаем click автор использует forEach(item), а вот когда делает remove то forEach(child)? Хочется разобраться а не просто копипастить.

@sanychleha974 4 жыл бұрын

Спасибо за видео) Только не совсем понял зачем в реализации на чистом JS использовать getElementById и затем убирать решетку из href, если можно также через querySelector выбрать элемент.

@prosto_razrabotka 4 жыл бұрын

По querySelector находится только первый элемент, а если заюзать querySelectorAll - то найдутся все элементы и среди них нужно искать подходящий по айди, классу или какому-то другому свойству. А вот с помощью getElementById мы говорим сразу, конкретно вот ЭТО покажи.

@SeverHolod 4 жыл бұрын

@@prosto_razrabotka дк айди уникальный и висит только у одного элемента. querySelector и querySelectorAll найдут необходимый контент по айдишнику

@minusvetal 3 жыл бұрын

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

@prosto_razrabotka 3 жыл бұрын

И? Задачу вижу. Вопрос нет.

@user-ml7rn3vx6s 4 жыл бұрын

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

@headspase2585 3 жыл бұрын

Запиши пожалуйста свою версию, интересно посмотреть)

@igorshcherba1418 3 жыл бұрын

Да, согласен! единственное, что убило (твой абсолютно правильный) коммент так это написание слова делегирование. но зато js ты знаешь лучше чем этот чел из IBM !!!

@nonenone6980 3 жыл бұрын

подскажите плиз у меня в .tabs__item есть span/ и вот при нажатии на span не срабатывает onclick. как пофиксить? js спасибо

@AndreiAlioshyn 3 жыл бұрын

У меня такая же проблема была. Просто переделал без "span". Спасибо за наводку!

@alexeygumenyuk8510 3 жыл бұрын

У меня одного табы с гитарой ассоциациируется, а не со вкладками?)

@victorsiber2911 3 жыл бұрын

а как при первом варианте после ~ подняться на уровень вверх вложенности?

@xOceanSpirit 2 жыл бұрын

Вверх никак. Ты должен отталкиваться либо от родителя, либо от соседа и двигаться вглубь. Наверх нельзя никак.

@headspase2585 3 жыл бұрын

Повторил последний способ, классы для заголовков прописываются а для контента не работают, как быть? в консоль выводит ошибку в последней строке.

@prosto_razrabotka 3 жыл бұрын

С ошибкой в телеграм чат

@kuznetsovs 3 жыл бұрын

Просто: разработка, подскажите пожалуйста! Если на странице несколько табов (JS) как быть? Как сделать чтобы они работали независимо?

@prosto_razrabotka 3 жыл бұрын

Сделать инициализацию через класс, например. И работать по классам по уровню вверх-вниз

@kuznetsovs 3 жыл бұрын

@@prosto_razrabotka :( А на практике? Я в JS никакой, только начинаю.

@sarwogame4465 2 жыл бұрын

Не пойму с чем связанно делал всё в точности по видео но табы в html и css не работают

@SevTylen 4 жыл бұрын

В каком редакторе код пишешь?

@prosto_razrabotka 4 жыл бұрын

VS Code

@unclechernomor4421 Жыл бұрын

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

@borislihachev8325 4 жыл бұрын

А как бы сделать плавное переключение табов )

@user-sz8qw4yp3f 3 жыл бұрын

Анимации в помощь)

@Maiq-The_Liar 4 жыл бұрын

Сори за оффтоп... Кресло выглядит удобным. Подскажите название, плз.

@prosto_razrabotka 4 жыл бұрын

Samurai. Но при выборе кресла важно учитывать рост, вес, материал и ряд других факторов.

@Maiq-The_Liar 4 жыл бұрын

@@prosto_razrabotka благодарю. Я для длительной работы взял игровое около года назад, но шея все равно устает, т.к. там не регулируется подголовник по горизонтали. Но не искал ничего другого, т.к. думал, что уже пользуюсь вершиной кресельного искусства. Теперь понял, что изначально в запросе должно было быть слово "эргономическое", а не "удобное" :)

@prosto_razrabotka 4 жыл бұрын

Какая версия табов вам наиболее близка?

@UrumovKonstantin 4 жыл бұрын

Конечно последняя!

@sanychleha974 4 жыл бұрын

Последняя. Для такой задачи, наверное, не стоит тащить за собой целый jquery)

@user-hk3zz3oi8b 4 жыл бұрын

Можно ещё сделать по data-атрибутам. И вместо ссылок использовать кнопки.

@kotlancer 4 жыл бұрын

Третье) не было ещё проектов без подключения плагинов, которые бы не использовали jQuery. Поэтому не вижу смысла мучаться

@headspase2585 3 жыл бұрын

А какая самая правильная с точки зрения опытного разработчика?

@user-bj6mx9rf2b 3 жыл бұрын

Если делать табы на грязном jquery, можно ли в блок .tabs-content__item, вставлять другие блоки помимо текста?

@tomirisibrahim8170 3 жыл бұрын

Cannot read property 'classList' of null точно как вы делаю не понимаю в чем дело ((

@prosto_razrabotka 3 жыл бұрын

О чем говорит ошибка?

@chikenmacnugget 4 жыл бұрын

Ребят, я только учусь js и опыта боевого у меня нет, но мне почему-то кажется, что вешать столько функций и циклов в цикле с функцией это не очень хорошая затея для такой достаточно простой задачи. Если я не прав, то поправьте меня и объясните пожалуйста)

@george_m641 3 жыл бұрын

Ну во первых функций не много, во вторых они все простые , и в 3 скорее всего меньше не получится ,если хочешь точно такой же результат

@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!

@vikpass1033 2 жыл бұрын

ещё бы ссылочку на гитхаб

@Kristina-dz9ve 3 жыл бұрын

Вот смотрю кучу уроков, пожалуйста хоть кто-то расскажите как сделать так, чтоб ссылка работала на определенный якорь. У меня 10 табов и мне нужно дать на определенный таб ссылку.

@prosto_razrabotka 3 жыл бұрын

В этом же видео, реализация через target...

@amirych 4 жыл бұрын

Ура, ванильный js

@prosto_razrabotka 4 жыл бұрын

Да, в некотором смысле ты меня подтолкнул к этому -) Но я решил это сделать по-своему и дабы не обидеть никого решил делать во всех вариациях -)

@amirych 4 жыл бұрын

@@prosto_razrabotka Очень приятно что автор уделяет внимание просьбам подписчиков)

@amirych 4 жыл бұрын

Теперь надо сделать через class сделать

@prosto_razrabotka 4 жыл бұрын

Ага, а ещё на реакте, ангуляре, вью... -)

@amirych 4 жыл бұрын

@@prosto_razrabotka Да нее) Чтоб можно было переиспользовать.

@kirillriman3611 4 жыл бұрын

Грязный JQuery xD

@prosto_razrabotka 4 жыл бұрын

Немножко дикого запада -)

@user-zd2yd8gf5h 4 жыл бұрын

Эх, уроков бы по реакт+редакс бы еще). Ведь мало кто уже пользуется ванильными "тремя китами" в разработке. На фрилансе разве что для небольших сайтиков

@afonchenkovdmitrii6420 3 жыл бұрын

Что самое смешное, я вижу как люди тут плюются на jQuery, но не вижу комента о том, что именно вариант на jQuery лучше, т.к. нативный сделан на новых версиях JS и не поддерживается IE(последние версии)

@alym.aleksey 3 жыл бұрын

про babel слышал?

@afonchenkovdmitrii6420 3 жыл бұрын

@@alym.aleksey конечно слышал, вот только интересно, слышал ли ты про минусы бабеля)

@alym.aleksey 3 жыл бұрын

@@afonchenkovdmitrii6420 нет, напиши вкратце какие там минусы, которые могут заставить разработчиков отказаться от него. Которые смогут перекрыть плюсы

@afonchenkovdmitrii6420 3 жыл бұрын

@@alym.aleksey, один и самый весомый. Он может спокойно наговнокодить. Если уж и использовать что-то под нужды кроссбраузерности, то ts. А jquery удобна своей простотой, но и у неё есть минусы.

@alym.aleksey 3 жыл бұрын

@@afonchenkovdmitrii6420 ясно. Удачи с таким подходом

@scythecult 3 жыл бұрын

Когда автор начал использовать метод replace, во всем этом многообразии говнокода, мысленно поставил +rep.

@alym.aleksey 3 жыл бұрын

зачем? если у него есть четкое представление, что будешь хеш, можно просто slice(1)

@clleoweb4083 3 жыл бұрын

Хреф.. .. ептеть...

@privet_baget 4 жыл бұрын

Единственный вопрос - нахрена изобретать велосипед, когда все элементы интерфейса давно и качественно разработаны и доступны. Бери любой фрэймворк и кастомизируй под свои потребности и нужды.

@prosto_razrabotka 4 жыл бұрын

Конечно... Бери любой фреймворк и грузи сотни килобайт, только потому что сам не в силах написать 10 строк необходимого кода...

@privet_baget 4 жыл бұрын

@@prosto_razrabotka Вопрос то не в том, что не в состоянии написать 10 строк кода. Зачем тратить на это драгоценное время, и пилить что-то, что может оказаться еще и потенциально багнутым? Предлагаете в 2020 году экономить килобайты? Серьезно? Чтобы что? За это даже гугл спид инсайтс не похвалит)

@user-ey1eq4ch4j 3 жыл бұрын

@@privet_baget Продолжу вашу мысль в ту же сторону. Фреймворки, знание PHP и т.д. тоже не нужны! Бери любой конструктор, и лепи сайт. Да, конструкторы убоги, и на них нельзя реализовать что-то за пределами их примитивного функционала. Зато - какая экономия времени! Между прочим, все сказанное - строго в рамках вашей логики. :)

@ok_kov 2 жыл бұрын

@@privet_baget а что непонятного? Просто нужны просмотры на ютуп. Деньги правят миром.

@shazu3270 Жыл бұрын

ну бл зачем мне смотреть все видео, чтобы понять как сделать это на native js? Какой смысл пихать все в одно видео и говорить "делаем также" "повторим тоже самое"...................................