От автора: итак, в предыдущем уроке мы с вами создали необходимую для вкладок (табов) разметку. При этом разметка позволяет не лимитировать количество вкладок в блоке, количество ограничено лишь размерами самого блока. В этом уроке нам необходимо написать клиентский скрипт, который будет управлять нашими табами.
Клиентский скрипт мы будем писать перед закрывающим тегом body. Также можно вынести его по желанию в отдельный файл и подключать уже этот файл. Давайте подключим библиотеку jQuery и напишем функцию-обертку для скрипта:
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс| 1 2 3 4 5 6 | <script src="//code.jquery.com/jquery-latest.js"></script> <script> $(function(){ }); </script> |
Сейчас тексты всех вкладок у нас скрыты в CSS следующим правилом:
| 1 2 3 | .tabs-text{ display: none; } |
Нам нужно, чтобы по умолчанию был показан текст первой вкладки. Для этого обратимся к блоку #tabs-1 и покажем его методом show():
| 1 2 3 | $(function(){ $('#tabs-1').show(); }); |
Идем далее. Как вы помните, текст вкладки связан с самой вкладкой. Связаны они значением атрибута href вкладки (якорь) и идентификатором блока с текстом, т.е. значение якоря конкретной ссылки равно значению ID конкретного блока с текстом.
Соответственно, при клике по вкладке нам нужно будет получить значение атрибута href ссылки данной вкладки:
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс| 1 2 3 4 5 6 7 | $(function(){ $('#tabs-1').show(); $('#items li').click(function(){ }); }); |
При этом необходимо предусмотреть вариант, когда клик происходит по уже активной вкладке (у таковой имеется класс active), в таком случае мы ничего делать не будем и завершим дальнейшее выполнение скрипта:
| 1 2 3 4 5 6 7 8 9 | $(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } }); }); |
Теперь давайте получим 2 необходимые для работы ссылки (или ID блоков текста): ссылку на текст, который необходимо показать, и ссылку на текст, который нужно скрыть. Иными словами, это будут ссылки на новую активную вкладку и предыдущую активную вкладку:
| 1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } var link = $(this).children().attr('href'); // ссылка на текст вкладки для показа var prevActive = $('li.active').children().attr('href'); // ссылка на текст пока что активной вкладки }); }); |
Теперь уберем класс active у предыдущей активной вкладки о присвоим этот класс вкладке, с которой работаем (для которой произошло событие клика):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } var link = $(this).children().attr('href'); // ссылка на текст вкладки для показа var prevActive = $('li.active').children().attr('href'); // ссылка на текст пока что активной вкладки $('li.active').removeClass('active'); $(this).addClass('active'); }); }); |
Собственно, нам осталось лишь скрыть текущий блок текста и показать новый блок текста. Это сделать просто, поскольку у нас есть все необходимое для этого — значения переменных link и prevActive. Также не забываем после всех действий вернуть FALSE для отмены перехода по ссылке:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(function(){ $('#tabs-1').show(); $('#items li').click(function(){ if( $(this).attr('class') == 'active' ){ return false; } var link = $(this).children().attr('href'); // ссылка на текст вкладки для показа var prevActive = $('li.active').children().attr('href'); // ссылка на текст пока что активной вкладки $('li.active').removeClass('active'); $(this).addClass('active'); // скрываем/показываем текст вкладок $(prevActive).fadeOut(500, function(){ $(link).fadeIn(); // изменяем цвета $('#items li').css('background', '#ccc'); $('li.active').css('background', '#f3f3f3'); }); return false; }); }); |
Вот и все, скрипт готов. С поставленной задачей мы успешно справились, не задействуя при этом библиотеку jQuery UI.
На этом наш урок завершен. Удачи и до новых встреч!
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть
привет, спасибо за материал =) очень полезен, но у меня проблема, когда хотел попробовать отразить первую вкладку с помощью, то ничего не вйшло … что может быть не так?
Приветствую.
Не совсем понял что значит «отразить первую вкладку с помощью»… конкретизируйте и тогда попробую ответить не вопрос
простите — на ходу писал … активизировать … а именно блок с контентом, ведь мы — то есть Вы присвоили ему display: none; — вот что у меня не работает … т.е. в общем скрип не показывают скрытый блок с контентом кладки
Ага, теперь понял… вот так вот сходу могу предположить 2 варианта:
1) не подключена (не корректно подключена) библиотека jQuery
2) допущена ошибка в JS-коде
Точнее можно сказать, только взглянув на код… можете дать ссылку на страницу или на нашем форуме создать тему и выложить в архиве скрипт, и я посмотрю.
ок… вот тема на форуме — + файли в архиве
Ок, ответил)
Як завжди, якісно, зрозуміло і в деталях. Дуже вдячний, успіху Вам, Андрію!
Будь ласка
Здравствуйте Андрей! Очень интересно и доходчиво рассказано. Не подскажите как создать вкладки с добавлением видеофайлов для киносайта?
Здравствуйте, Вадим. В каждой вкладке будут свои элементы формы. После заполнения формы она просто отправляется на сервер. Собственно, все)
Спасибо за быстрый ответ. Но то что для Вас просто, для меня темный лес. Элементы формы — какие? Или это долго объяснять? В любом случае спасибо.
Тут даже вопрос не в том, долго ли это объяснять. Дело в том, что в рамках комментариев это сделать невозможно в принципе — тема очень объемная.
Существует возможность создать видеоурок на эту тему? С подробным описанием какой код куда вставлять и т.д. Встретил на одном из сайтов табы такого вида 4put.ru/view-max-picture.php?id=2948102 , хотелось бы и себе такое, очень функционально. Думаю для многих было бы интересно, киносайтов множество, а таких юзеров как я еще больше.
Посмотрел на скриншот того, что вы хотите, и дошло, что я неверно понял ваш вопрос. Вы хотите не загружать фильмы физически на сервер, а хотите просто показывать фильмы с различных сервисов, например YouTube, Vimeo и т.д. Если сейчас понял верно, тогда тут все просто: получаете HTML-код нужного видео и просто вставляете его в контент нужной вкладки. Больше ничего и не нужно, в каждой вкладке будет свое видео.
Все правильно поняли. Но что бы вставить необходимо использовать что-то типа [xfgiven], и через доп поля вставлять ссылку на фильм. Или можно проще?
Нет, не нужно использовать что-то типа. Нужно просто скопировать HTML-код, который предоставляет сервис, и добавить его в контент вкладки. Например, в YouTube для получения нужного кода необходимо обратиться к меню Поделиться — HTML-код.
контент вкладки … ? Получается html код необходимо каждый раз вставлять и редактировать в полной новости иначе на всех страницах будет один и тот же фильм?
Да, если не используется программный алгоритм. Но обычно код каждого фильма хранится в базе данных и выводится оттуда динамически, чтобы именно каждый раз ничего не делать вручную.
Здравствуйте Андрей. Подскажите каким редактором Вы пользовались в этом видеоуроке.
Здравствуйте, Вадим. Это Sublime Text 2.
Здравствуйте ещё раз. Закладки в браузере работают отлично file:///C:/Users/ps/Desktop/tabs/index.html , но при установке на сайт стили не работают, возможно из-за конфликта/ или неправильного подключения библиотеки? Может что подскажите. Заранее спасибо.
Здравствуйте. Да тут особо нечего и подсказывать, проблему вы сами озвучили — некорректное подключение или же конфликт библиотек. Больше и точнее вам подскажет консоль браузера, где должны быть показаны ошибки, если таковые есть.
если вы не против, давайте через асю или скайп, как удобнее. Не могу подключить, что-то не туда вставляю видимо. Ася — 671449608
Вадим, для решения подобных вопросов у нас предусмотрен .
Здравствуйте Андрей. Подскажите как убрать нижний пробел между рамкой и текстом/плеером. Скрин -http://4put.ru/view-max-picture.php?id=2952085 Уменьшение рамки или увеличение размера плеера результата не дает. Спасибо.
Здравствуйте, Вадим. Обычно это делают с помощью CSS-свойств margin и padding. Попробуйте, если не получится, тогда только нужно смотреть код. Архив с кодом можно выложить в сообщении на нашем форуме или же дать там же ссылку на архив или страницу, если она выложена в сеть.
Здравствуйте, Андрей. Я пытался реализовать запоминание вкладок, но у меня не получается реализовать это. ссылка на исходники share.bashtel.ru/files/446224, буду очень благодарен за помощь
Здравствуйте. Для решения подобных вопросов у нас есть форум, где можете конкретнее описать, как именно пробовали сделать и почему не получается.
ок… вот тема на форуме — + файлы в архиве
Ответил в теме.
Спасибо, Вам, Андрей, за очень познавательный урок! посмотрел, и сразу внедрил на своем сайте!
Пожалуйста, Алексей
Cпасибо большое за урок! Но возник один вопрос, если задаем цвет для ссылки вот здесь
#tabs ul li a{
display: table-cell;
width: 350px;
height: 40px;
line-height: 40px;
text-decoration: none;
color:#000;
}
то он везде будет черный и у активной ссылки, а нужно чтобы у не активных оставался например черный а у активного был белый. Если отсюда убираем свойство color то приписывая нужный цвет ссылки к классу .active a цвет меняется, но тогда у не активных цвет остается по умолчанию, как быть в таком случае или цвет активной ссылки задать где в скрипте?
Ну так укажите нужный цвет для ссылки в активном элементе списка:
#tabs ul li.active a{color: #e8117f;
}
И всех делов)
Действительно, и всего делов то) Большущее спасибо! Это лучший урок по созданию вкладок, просто и понятно!
Пожалуйста)
Воспользовался вашими уроками для собственных нужд. Все очень здорово, но есть моменты, которые мне не понравились.
Сразу оговорюсь, что верстальщик, а тем более программист, я никакой, поэтому к замечаниям относитесь соответствующим образом. Могу сильно ошибаться.
Первый момент, который мне не понравился — это разрозненность материала. Сначала я вышел на вторую часть урока. А вот чтобы найти первую — пришлось попыхтеть. Перелопатил весь сайт. Причем без всякой надежды не успех. Неплохо было бы и в первой и второй части сделать ссылки по которым можно было бы перейти к нужному материалу.
Хотя, положительный момент в этом есть. Нашел кучу материала, который захотелось изучить. Но все равно это озлобляет.
Далее замечание по правилам CSS.
Вы назначаете для табов и ссылок в табах одинаковую высоту 40 пх. И затем, ставите еще и свойство line-height, которое фактически управляет высотой блока тоже 40пх. И теперь, чтобы поменять высоту в сторону уменьшения, нужно изменить и первое и второе, третье. А можно было бы убрать первую и вторую высоту и регулировать все с помощью line-height.
Теперь про изменение цвета активной вкладки. Вы программно, с помощью скрипта меняете один цвет на другой. Но, если мы захотим поменять цвет, и сделаем это только в таблице CSS, а в скрипте забудем, то получим проблему, причины которой сразу можно и не найти. Так было со мной.
Не знаю, насколько это возможно, но логичнее было бы ссылаться не на явный цвет, а на класс, который определен в таблицах CSS.
Ну и последнее. Не знаю, как кого, но меня дико раздражает если курсор превращается в ссылку, но при клике никакой реакции не происходит. Именно это происходит когда мы наводим на вкладку активного таба. То, что меняется цвет — это еще пол беды, но появляется палец. Который при клике оказывается фигой.
Возможно, в этом случае можно поменять свойство cursor-pointer с помощью скрипта. Но но не каждый это сможет.
Вспомнил еще один момент. Касается запоминания активной вкладки. Андрей как-то бегло рассказал об этом, как о совершенно очевидной вещи. Очевидная то она очевидная, но не для всех. Стоило бы затратить еще пяток минут, и набросать код. Урок от этого только бы выиграл.
С уважением, Трофим. Отнеситесь к этому не как критике или пожеланиям.
Это просто мысли вслух.
Трофим, относительно ссылки на первый урок, то она есть прямо в конце данного урока в блоке Похожие записи. Также урок можно найти, воспользовавшись поиском, по названию урока — Создание вкладок — урок великолепно находится)
Относительно запоминания вкладок, то это легко делается с помощью плагина jQuery.cookie, работу с которым я неоднократно показывал в ряде предыдущих уроков, поэтому повторяться не видел смысла… но если есть интерес, тогда без проблем можно записать урок на эту тему.
Относительно курсора, то это уже дело вкуса. Мне, наоборот, привычнее, когда на элементе, с которым можно что-то сделать (не обязательно перейти), курсор принимает соответствующий вид.
Про ссылку на первую часть все верно. Слона то я и не приметил.
Андрей.
Я понимаю, что комментарии к статье это не место для дискуссий. Можете удалить после прочтения. Но, приведу случай из жизни.
Личный кабинет Сбербанка. Казалось бы — все должно быть супер-бупер.
При входе есть два варианта «Подтвердить по CMS» и «Другой способ подтверждения» Наводим на «Другой….» Появляется палец — то есть это ссылка. Жмем. Ноль эмоций. Я в ступоре. Консультант в ступоре. Несет какую-то ахинею про загруженность сервера. Оказалось, что ссылкой является всплывающая подсказка. По-моему это хамство. Хамство, потому, что личным кабинетом пользуются не только «продвинутые». Но и лузеры. Даже, если их ничтожно мало, ориентироваться нужно именно на них. Поэтому я считаю, что ссылок, ведущих «никуда» на сайте быть не должно.
Это вам все до тошноты понятно. А посетители разные. С разным уровнем владения компом и восприятием «виртуального мира».
И относительно запоминания. Урок это было бы здорово. Но судить вам. Интересно ли это посетителям. Будет ли это востребовано? Для меня это было бы логичным продолжением урока. Уж если сказали «А», то надо говорить и «Б». Говорить в полном объеме.
Как вариант можно предложить фрагмент кода. Можно не здесь. Можно на форуме. Но это было бы полезно.
Или, как вариант, дать ссылку на наиболее «близкие по тематике» материалы.
Понятное дело, что мое мнение может не совпадать с мнением как держателей сайта, так и посетителей.
Если, все же, сделаете, не сочтите за труд сообщить.
Графу e-mail я заполнил.
Еще пару слов вдогонку.
Хорошая мысля приходит опосля.
Возможно, это легко делается с помощью плагина jQuery.cookie.
Но в чем изюминка, или, как говорится «цимус», ваших уроков о табах? В том, что все реализуется десятком строк кода. И это возможно даже без подключения к инету.
Это именно мой случай. Не будем обсуждать почему. Каждый сходит с ума по-своему.
Вот поэтому функция запоминания без jQuery была бы несомненно полезна.
Хотела установить ваши табы на сайт Юкоз, но они почему-то ломают весь дизайн. Отчего этого может быть? Или может быть они с Юкозом не совместимы?
Как минимум нужно посмотреть сайт, чтобы ответить на вопрос.
Вкладки пытаюсь реализовать на тестовом сайте, чтобы не ломать текущий рабочий сайт. Вот какая ерунда происходит с сайтом. Он сжимается и становится узкий akulaz.at.ua/publ/igry/kinokhit/1-1-0-13
Если откроете консоль, то увидите там ошибки, связанные с кодом вкладок. Попробуйте убрать комментарии из кода, который вставляете. Это первый момент.
Относительно стилей, то я в Вашем файле стилей my.css не нашел стилей вкладок… либо Вы их не добавили, либо не сохранили файл, либо нужно почистить кэш, если таковой используется.
Не понимаю, о каких комментариях идет речь? Код снесла специально, потому что сайт ломается, но если надо, могу вернуть.
На Юкозе есть специальный раздел, который так и называется CSS, где прописаны все-все стили, туда я и добавила ваш код.
В коде вкладок есть комментарии кода, т.е. текст, поясняющий, что делает та или иная строка кода. Вот эти комментарии и нужно удалить, оставив только код и ничего больше. Относительно того, что Вы добавили и куда, то ведь это легко проверить: в исходном коде откройте файл стилей, в который Вы что-то добавили, и попробуйте там найти новые правила. На данный момент там их нет.
Екатерина, дальнейшее обсуждение давайте перенесем на наш форум, который специально создавался для решения подобных вопросов.
Стили CSS добавляю не отдельным файлом, а просто копирую их и вставляю туда, где прописаны все стили сайта.
Забыла сказать, что дизайн сайта ломается после того, как добавляю CSS стили вкладок
Большое вам спасибо за ваши уроки!
Прошел курс по вордпрессу — супер!
Для начала с головой и больше хватило))
Пожалуйста)
Будьте добры, подскажите, где допустил ошибку:
$(‘#items li.active:before’).css(‘display’, ‘block’).css(‘content’, »).css(‘height’, ’3px’).css(‘background’, ‘#d7a229′);
Александр, нужно смотреть весь код, который можно запустить в браузере. Можете задать вопрос на нашем форуме и прикрепить архив с кодом, я попробую посмотреть. По этой строчке могу сделать одно замечание, которое касается множественного вызова функции css. Функцию можно вызвать только один раз, передав ей объект с необходимыми правилами:
$('#items li.active:before').css({'display':'block', 'height':'3px'});Приветствую. Большое спасибо за статью, особенно за наглядный видео пример. Теперь благодаря Вам — знаю как самому , руками, без всякого мусора (плагинов и прочего) прикручивать табы . Добра Вам, а нам — побольше подобных видеоуроков от Вас)