{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем привет, друзья!\nСегодня разберем как делаются вкладки(табы) на JQuery и JavaScript .","type":"unstyled","key":"1f5n4"},{"data":{"embedData":{"type":"youtube","postUrl":"https://www.youtube.com/embed/6Nvf23aDGIo"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"2n4q2"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":4,"offset":18}],"inlineStyleRanges":[{"length":2,"offset":78,"style":"BOLD"}],"text":"Можете посмотреть демо чтобы увидеть как будет выглядеть результат. В колонке JS сверху расположен код JQuery , ниже JavaScript.","type":"unstyled","key":"6kvr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В самом начале объясню схему, по которой мы будем делать табы:","type":"unstyled","key":"opf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":62,"style":"ITALIC"}],"text":"Добавим вкладкам и блокам с их содержимым классы с приставкой js- для обращения к ним из JavaScript.","type":"unordered-list-item","key":"5v6fc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":21,"style":"ITALIC"}],"text":"Добавим data атрибут data-tab для идентификации наших табов. Некоторые делают табы по индексу элемента в dom-дереве, я так делать не буду, это не гибкая конструкция.","type":"unordered-list-item","key":"c2vq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":188,"style":"ITALIC"},{"length":8,"offset":221,"style":"ITALIC"}],"text":"При клике на вкладку, удалим активный класс у всех вкладок, добавим той, по которой кликнули, удалим активный класс у всех блоков с содержимым и добавим тому, у которого значение атрибута data-tab такое же как у атрибута data-tab нашей вкладки.","type":"unordered-list-item","key":"53ch3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Про приставку js. \nМы добавляем отдельный класс для манипуляций из js потому что, на один класс могут быть завязаны стили, которые в дальнейшем могут быть заменены. Приставка js даст вам или другому разработчику понять что этот элемент, в частности класс, участвует в интерактивности, на нем завязаны только события javascript. Таким образом этот класс всегда будет у элемента, не смотря на стили.","type":"unstyled","key":"1j3rn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В нескольких проектах я это правило игнорировал и потом на исправление багов я тратил время.","type":"unstyled","key":"aquj7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первым делом создадим разметку для наших табов.","type":"unstyled","key":"f0mb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

\n ","type":"unstyled","key":"4frm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2tn3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n

Первая
Вторая
Третья

\n \n \n

\n Далеко-далеко за словесными, горами в стране гласных и согласных живут рыбные тексты.\n
\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum rem laboriosam cum repudiandae natus corrupti?\n
\n Далеко-далеко за словесными горами.\n

","type":"unstyled","key":"fbf8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первой вкладке и её содержимому мы добавили класс active, чтобы по-умолчанию эти два элемента были активны . Остальные вкладки оставляем неактивными а блоки с контентом скрываем.","type":"unstyled","key":"1kbhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили:","type":"unstyled","key":"3ta4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".tabs {\n width: 100%;\n max-width: 500px;\n}","type":"unstyled","key":"f6bgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для списка вкладок */\n.tab-header {\n list-style: none;\n padding-left: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin: 0;\n}","type":"unstyled","key":"86kr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для вкладки */\n.tab-header__item {\n padding: 10px 20px;\n margin-right: 5px;\n cursor: pointer;\n border: 1px solid #ddd;\n}","type":"unstyled","key":"89iu3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для активной вкладки */\n.tab-header__item.active {\n color: red;\n border-bottom: none;\n position: relative;\n background-color: #fff;\n}","type":"unstyled","key":"accht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стиль для списка контейнеров с содержимым вкладок */\n.tab-content {\n list-style: none;\n padding: 0;\n margin: 0;\n}","type":"unstyled","key":"6t3cc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */\n.tab-content__item {\n display: none;\n padding: 20px;\n border: 1px solid #ddd;\n margin-top: -1px;\n}","type":"unstyled","key":"6tr3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Стили для активного контейнера вкладки */\n.tab-content__item.active {\n display: block;\n}","type":"unstyled","key":"517oa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизовать — дело вкуса, если вы не против я стилизовал на свой вкус.","type":"unstyled","key":"2nefe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы определили вид наших вкладок и контенеров с содержимым. Важным для понимания будут стили для вкладок, активной вкладки, контенеров, активного контейнера.","type":"unstyled","key":"bfvat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут все довольно просто. Активной вкладке добавляем изменение цвета, остальные остаются с серым цветом. Активный блок показываем, остальные скрываем.","type":"unstyled","key":"1vvrv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Разберем Jquery код:","type":"header-three","key":"p83p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, первое что нужно сделать, обработак клик по каждому элементу.","type":"unstyled","key":"91kdl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$('.js-tab-trigger').click(function() {\n // клик! \n})","type":"unstyled","key":"2lcol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нам нужно получить идентификатор нашей вкладки и найти контент с таким же значением data-tab.","type":"unstyled","key":"e6jgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$('.js-tab-trigger').click(function() {\n var id = $(this).attr('data-tab'), // 1\n content = $('.js-tab-content[data-tab=\"'+ id +'\"]'); // 2\n});","type":"unstyled","key":"7lk46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":27,"style":"ITALIC"}],"text":"Получили значение атрибута data-tab у текущего элемента","type":"unordered-list-item","key":"bka6g"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":6,"offset":383}],"inlineStyleRanges":[{"length":55,"offset":316,"style":"ITALIC"}],"text":"Здесь происходит конкатенация (соединение) строк. В селекторе jquery мы разрываем строку и вставляем туда значение нашей переменной id с помощью операторов сложения “+”. Если вы складываете строки, оператор “+” соединит их. В результате конкатенации строк мы получили такой селектор: ‘.js-tab-content[data-tab=”3\"]’ (содержимое data-tab меняется в зависимости от вкладки).\nПодробнее здесь.","type":"unordered-list-item","key":"ftgdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отлично, теперь мы знаем и вкладку по которой мы кликнули и контейнер с содержимым этой вкладки. Теперь дело за малым, поработать с классами. Дополним наш предыдущий код.","type":"unstyled","key":"1onr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$('.js-tab-trigger').click(function() {\n var id = $(this).attr('data-tab'),\n content = $('.js-tab-content[data-tab=\"'+ id +'\"]');\n \n $('.js-tab-trigger.active').removeClass('active'); // 1\n $(this).addClass('active'); // 2\n \n $('.js-tab-content.active').removeClass('active'); // 3\n content.addClass('active'); // 4\n});","type":"unstyled","key":"4c8a3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":14,"style":"ITALIC"}],"text":"Удалили класс active у активной вкладки","type":"unordered-list-item","key":"d04gr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":15,"style":"ITALIC"}],"text":"Добавили класс active вкладке по которой кликнули","type":"unordered-list-item","key":"1q03h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":14,"style":"ITALIC"}],"text":"Удалили класс active у активного контейнера с содержимым","type":"unordered-list-item","key":"de6mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":15,"style":"ITALIC"}],"text":"Добавили класс active контейнеру который должен быть активным","type":"unordered-list-item","key":"13u37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и все, код на JQuery занял у нас всего лишь 10 строк кода. Рассмотрим JavaSсript.","type":"unstyled","key":"99skk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код на JavaScript не сложнее чем jquery код. Когда я начинал знакомиться с JQuery, в одном из проектов она не хотела работать, там была сложная структура битрикс сайта и я потратил много времени чтобы заставить её работать. После безрезультатных попыток я психанул и написал табы на JavaScript, до этого я боялся его, но написав табы без JQuery удивился, это не так сложно как кажется.","type":"unstyled","key":"9ih3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Разберем JavaScript код:","type":"header-three","key":"20qlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чес обработать клик по вкладке, объявим несколько переменных для наших вкладок и контенеров с содержимым.","type":"unstyled","key":"1ajvr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var jsTriggers = document.querySelectorAll('.js-tab-trigger'),\n jsContents = document.querySelectorAll('.js-tab-content');","type":"unstyled","key":"1a2bm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь можно обработать клик по вкладкам.","type":"unstyled","key":"11sbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jsTriggers.forEach(function(trigger) { // 1\n trigger.addEventListener('click', function() { // 2\n // клик!\n });\n});","type":"unstyled","key":"vimu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Циклом перебираем элементы в массива. В массиве у нас лежат dom-элементы, то есть наши вкладки.","type":"unordered-list-item","key":"8f8ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждому элементу добавляем функцию-обработчик при событии клика.","type":"unordered-list-item","key":"7r8br"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь в функции-обработчике объявим несколько переменных для удобной манипуляции. Все можно сделать и без переменных, но мы будем делать по-хорошему.","type":"unstyled","key":"89df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var id = this.getAttribute('data-tab'), // 1\n content = document.querySelector('.js-tab-content[data-tab=\"'+id+'\"]'), // 2\n activeTrigger = document.querySelector('.js-tab-trigger.active'), // 3\n activeContent = document.querySelector('.js-tab-content.active'); // 4","type":"unstyled","key":"jk30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получаем идентификатор вкладки.","type":"unordered-list-item","key":"7ilha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":45,"style":"ITALIC"}],"text":"Ищем контейнер с таким же значением атрибута data-tab.","type":"unordered-list-item","key":"fh0c9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ищем активную вкладку.","type":"unordered-list-item","key":"32v41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ищем активный контейнер.","type":"unordered-list-item","key":"6p6o5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В заключении поработаем с классами:","type":"unstyled","key":"cf45h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var jsTriggers = document.querySelectorAll('.js-tab-trigger'),\n jsContents = document.querySelectorAll('.js-tab-content');","type":"unstyled","key":"9phn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jsTriggers.forEach(function(trigger) {\n trigger.addEventListener('click', function() {\n var id = this.getAttribute('data-tab'),\n content = document.querySelector('.js-tab-content[data-tab=\"'+id+'\"]'),\n activeTrigger = document.querySelector('.js-tab-trigger.active'),\n activeContent = document.querySelector('.js-tab-content.active');\n \n activeTrigger.classList.remove('active'); // 1\n trigger.classList.add('active'); // 2\n \n activeContent.classList.remove('active'); // 3\n content.classList.add('active'); // 4\n });\n});","type":"unstyled","key":"c1vio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":14,"style":"ITALIC"}],"text":"Удалили класс active у активной вкладки","type":"unordered-list-item","key":"cjbtm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":15,"style":"ITALIC"}],"text":"Добавили класс active вкладке по которой кликнули","type":"unordered-list-item","key":"a6ulp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":14,"style":"ITALIC"}],"text":"Удалили класс active у активного блока с содержимым","type":"unordered-list-item","key":"1to6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":15,"style":"ITALIC"}],"text":"Добавили класс active контейнеру который должен быть активным","type":"unordered-list-item","key":"b6phg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и все! Спасибо вам за прочтении статьи. \nЕсли понравилось — поставьте лайк, если нет — напишите почему в комментариях.","type":"unstyled","key":"5jkgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7iejg"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":49,"offset":56}],"inlineStyleRanges":[],"text":"Оригинал статьи с крутым форматированием кода и видео:\n https://dev-postnov.ru/tabs-on-javascript-jquery/ ","type":"unstyled","key":"66mdh"},{"data":{"image":{"id":"5e634d95dbf48a391f4c808e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dla6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"74crn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"TozL9b9SwCP3nak3uKWv"}],"entityMap":{"0":{"data":{"href":"https://codepen.io/dan_postnov/pen/MqROLx","url":"https://codepen.io/dan_postnov/pen/MqROLx"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://learn.javascript.ru/operators#%D1%81%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D1%82%D1%80%D0%BE%D0%BA-%D0%B1%D0%B8%D0%BD%D0%B0%D1%80%D0%BD%D1%8B%D0%B9","url":"https://learn.javascript.ru/operators#%D1%81%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D1%82%D1%80%D0%BE%D0%BA-%D0%B1%D0%B8%D0%BD%D0%B0%D1%80%D0%BD%D1%8B%D0%B9"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://dev-postnov.ru/tabs-on-javascript-jquery/","url":"https://dev-postnov.ru/tabs-on-javascript-jquery/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}