Создание вкладок (табов). Урок 2

Создание вкладок (табов)

От автора: итак, в предыдущем уроке мы с вами создали необходимую для вкладок (табов) разметку. При этом разметка позволяет не лимитировать количество вкладок в блоке, количество ограничено лишь размерами самого блока. В этом уроке нам необходимо написать клиентский скрипт, который будет управлять нашими табами.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Клиентский скрипт мы будем писать перед закрывающим тегом body. Также можно вынести его по желанию в отдельный файл и подключать уже этот файл. Давайте подключим библиотеку jQuery и напишем функцию-обертку для скрипта:

<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
	$(function(){

	});
</script>

Сейчас тексты всех вкладок у нас скрыты в CSS следующим правилом:

.tabs-text{
	display: none;
}

Нам нужно, чтобы по умолчанию был показан текст первой вкладки. Для этого обратимся к блоку #tabs-1 и покажем его методом show():

$(function(){
	$('#tabs-1').show();
});

Идем далее. Как вы помните, текст вкладки связан с самой вкладкой. Связаны они значением атрибута href вкладки (якорь) и идентификатором блока с текстом, т.е. значение якоря конкретной ссылки равно значению ID конкретного блока с текстом.

Соответственно, при клике по вкладке нам нужно будет получить значение атрибута href ссылки данной вкладки:

$(function(){
	$('#tabs-1').show();

	$('#items li').click(function(){

	});
});

При этом необходимо предусмотреть вариант, когда клик происходит по уже активной вкладке (у таковой имеется класс active), в таком случае мы ничего делать не будем и завершим дальнейшее выполнение скрипта:

$(function(){
	$('#tabs-1').show();

	$('#items li').click(function(){
		if( $(this).attr('class') == 'active' ){
			return false;
		}
	});
});

Теперь давайте получим 2 необходимые для работы ссылки (или ID блоков текста): ссылку на текст, который необходимо показать, и ссылку на текст, который нужно скрыть. Иными словами, это будут ссылки на новую активную вкладку и предыдущую активную вкладку:

$(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 у предыдущей активной вкладки о присвоим этот класс вкладке, с которой работаем (для которой произошло событие клика):

$(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 для отмены перехода по ссылке:

$(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.

На этом наш урок завершен. Удачи и до новых встреч!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (53)

  1. Роман

    привет, спасибо за материал =) очень полезен, но у меня проблема, когда хотел попробовать отразить первую вкладку с помощью, то ничего не вйшло … что может быть не так?

    • Андрей Кудлай

      Приветствую.
      Не совсем понял что значит «отразить первую вкладку с помощью»… конкретизируйте и тогда попробую ответить не вопрос :)

      • Роман

        простите — на ходу писал … активизировать … а именно блок с контентом, ведь мы — то есть Вы присвоили ему display: none; — вот что у меня не работает … т.е. в общем скрип не показывают скрытый блок с контентом кладки

        • Андрей Кудлай

          Ага, теперь понял… вот так вот сходу могу предположить 2 варианта:
          1) не подключена (не корректно подключена) библиотека jQuery
          2) допущена ошибка в JS-коде
          Точнее можно сказать, только взглянув на код… можете дать ссылку на страницу или на нашем форуме создать тему и выложить в архиве скрипт, и я посмотрю.

  2. Роман

    ок… вот тема на форуме — http://webformyself.com/forum/index.php/topic/1640/ + файли в архиве

  3. Андрій

    Як завжди, якісно, зрозуміло і в деталях. Дуже вдячний, успіху Вам, Андрію!

  4. Вадим

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

    • Андрей Кудлай

      Здравствуйте, Вадим. В каждой вкладке будут свои элементы формы. После заполнения формы она просто отправляется на сервер. Собственно, все)

      • Вадим

        Спасибо за быстрый ответ. Но то что для Вас просто, для меня темный лес. Элементы формы — какие? Или это долго объяснять? В любом случае спасибо.

        • Андрей Кудлай

          Тут даже вопрос не в том, долго ли это объяснять. Дело в том, что в рамках комментариев это сделать невозможно в принципе — тема очень объемная.

          • Вадим

            Существует возможность создать видеоурок на эту тему? С подробным описанием какой код куда вставлять и т.д. Встретил на одном из сайтов табы такого вида 4put.ru/view-max-picture.php?id=2948102 , хотелось бы и себе такое, очень функционально. Думаю для многих было бы интересно, киносайтов множество, а таких юзеров как я еще больше.

          • Андрей Кудлай

            Посмотрел на скриншот того, что вы хотите, и дошло, что я неверно понял ваш вопрос. Вы хотите не загружать фильмы физически на сервер, а хотите просто показывать фильмы с различных сервисов, например YouTube, Vimeo и т.д. Если сейчас понял верно, тогда тут все просто: получаете HTML-код нужного видео и просто вставляете его в контент нужной вкладки. Больше ничего и не нужно, в каждой вкладке будет свое видео.

  5. Вадим

    Все правильно поняли. Но что бы вставить необходимо использовать что-то типа [xfgiven], и через доп поля вставлять ссылку на фильм. Или можно проще?

    • Андрей Кудлай

      Нет, не нужно использовать что-то типа. Нужно просто скопировать HTML-код, который предоставляет сервис, и добавить его в контент вкладки. Например, в YouTube для получения нужного кода необходимо обратиться к меню Поделиться — HTML-код.

      • Вадим

        контент вкладки … ? Получается html код необходимо каждый раз вставлять и редактировать в полной новости иначе на всех страницах будет один и тот же фильм?

        • Андрей Кудлай

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

          • Вадим

            Здравствуйте Андрей. Подскажите каким редактором Вы пользовались в этом видеоуроке.

          • Андрей Кудлай

            Здравствуйте, Вадим. Это Sublime Text 2.

  6. Вадим

    Здравствуйте ещё раз. Закладки в браузере работают отлично file:///C:/Users/ps/Desktop/tabs/index.html , но при установке на сайт стили не работают, возможно из-за конфликта/ или неправильного подключения библиотеки? Может что подскажите. Заранее спасибо.

    • Андрей Кудлай

      Здравствуйте. Да тут особо нечего и подсказывать, проблему вы сами озвучили — некорректное подключение или же конфликт библиотек. Больше и точнее вам подскажет консоль браузера, где должны быть показаны ошибки, если таковые есть.

      • Вадим

        если вы не против, давайте через асю или скайп, как удобнее. Не могу подключить, что-то не туда вставляю видимо. Ася — 671449608

  7. Вадим

    Здравствуйте Андрей. Подскажите как убрать нижний пробел между рамкой и текстом/плеером. Скрин -http://4put.ru/view-max-picture.php?id=2952085 Уменьшение рамки или увеличение размера плеера результата не дает. Спасибо.

    • Андрей Кудлай

      Здравствуйте, Вадим. Обычно это делают с помощью CSS-свойств margin и padding. Попробуйте, если не получится, тогда только нужно смотреть код. Архив с кодом можно выложить в сообщении на нашем форуме или же дать там же ссылку на архив или страницу, если она выложена в сеть.

  8. Munir

    Здравствуйте, Андрей. Я пытался реализовать запоминание вкладок, но у меня не получается реализовать это. ссылка на исходники share.bashtel.ru/files/446224, буду очень благодарен за помощь

    • Андрей Кудлай

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

  9. Munir

    ок… вот тема на форуме — http://webformyself.com/forum/index.php/topic/2272/ + файлы в архиве

  10. Алексей

    Спасибо, Вам, Андрей, за очень познавательный урок! посмотрел, и сразу внедрил на своем сайте!

  11. Александр

    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;
      }

      И всех делов)

  12. Трофим

    Воспользовался вашими уроками для собственных нужд. Все очень здорово, но есть моменты, которые мне не понравились.
    Сразу оговорюсь, что верстальщик, а тем более программист, я никакой, поэтому к замечаниям относитесь соответствующим образом. Могу сильно ошибаться.
    Первый момент, который мне не понравился — это разрозненность материала. Сначала я вышел на вторую часть урока. А вот чтобы найти первую — пришлось попыхтеть. Перелопатил весь сайт. Причем без всякой надежды не успех. Неплохо было бы и в первой и второй части сделать ссылки по которым можно было бы перейти к нужному материалу.
    Хотя, положительный момент в этом есть. Нашел кучу материала, который захотелось изучить. Но все равно это озлобляет.
    Далее замечание по правилам CSS.
    Вы назначаете для табов и ссылок в табах одинаковую высоту 40 пх. И затем, ставите еще и свойство line-height, которое фактически управляет высотой блока тоже 40пх. И теперь, чтобы поменять высоту в сторону уменьшения, нужно изменить и первое и второе, третье. А можно было бы убрать первую и вторую высоту и регулировать все с помощью line-height.
    Теперь про изменение цвета активной вкладки. Вы программно, с помощью скрипта меняете один цвет на другой. Но, если мы захотим поменять цвет, и сделаем это только в таблице CSS, а в скрипте забудем, то получим проблему, причины которой сразу можно и не найти. Так было со мной.
    Не знаю, насколько это возможно, но логичнее было бы ссылаться не на явный цвет, а на класс, который определен в таблицах CSS.
    Ну и последнее. Не знаю, как кого, но меня дико раздражает если курсор превращается в ссылку, но при клике никакой реакции не происходит. Именно это происходит когда мы наводим на вкладку активного таба. То, что меняется цвет — это еще пол беды, но появляется палец. Который при клике оказывается фигой.
    Возможно, в этом случае можно поменять свойство cursor-pointer с помощью скрипта. Но но не каждый это сможет.
    Вспомнил еще один момент. Касается запоминания активной вкладки. Андрей как-то бегло рассказал об этом, как о совершенно очевидной вещи. Очевидная то она очевидная, но не для всех. Стоило бы затратить еще пяток минут, и набросать код. Урок от этого только бы выиграл.
    С уважением, Трофим. Отнеситесь к этому не как критике или пожеланиям.
    Это просто мысли вслух.

    • Андрей Кудлай

      Трофим, относительно ссылки на первый урок, то она есть прямо в конце данного урока в блоке Похожие записи. Также урок можно найти, воспользовавшись поиском, по названию урока — Создание вкладок — урок великолепно находится)
      Относительно запоминания вкладок, то это легко делается с помощью плагина jQuery.cookie, работу с которым я неоднократно показывал в ряде предыдущих уроков, поэтому повторяться не видел смысла… но если есть интерес, тогда без проблем можно записать урок на эту тему.
      Относительно курсора, то это уже дело вкуса. Мне, наоборот, привычнее, когда на элементе, с которым можно что-то сделать (не обязательно перейти), курсор принимает соответствующий вид.

      • Трофим

        Про ссылку на первую часть все верно. Слона то я и не приметил.
        Андрей.
        Я понимаю, что комментарии к статье это не место для дискуссий. Можете удалить после прочтения. Но, приведу случай из жизни.
        Личный кабинет Сбербанка. Казалось бы — все должно быть супер-бупер.
        При входе есть два варианта «Подтвердить по CMS» и «Другой способ подтверждения» Наводим на «Другой….» Появляется палец — то есть это ссылка. Жмем. Ноль эмоций. Я в ступоре. Консультант в ступоре. Несет какую-то ахинею про загруженность сервера. Оказалось, что ссылкой является всплывающая подсказка. По-моему это хамство. Хамство, потому, что личным кабинетом пользуются не только «продвинутые». Но и лузеры. Даже, если их ничтожно мало, ориентироваться нужно именно на них. Поэтому я считаю, что ссылок, ведущих «никуда» на сайте быть не должно.
        Это вам все до тошноты понятно. А посетители разные. С разным уровнем владения компом и восприятием «виртуального мира».
        И относительно запоминания. Урок это было бы здорово. Но судить вам. Интересно ли это посетителям. Будет ли это востребовано? Для меня это было бы логичным продолжением урока. Уж если сказали «А», то надо говорить и «Б». Говорить в полном объеме.
        Как вариант можно предложить фрагмент кода. Можно не здесь. Можно на форуме. Но это было бы полезно.
        Или, как вариант, дать ссылку на наиболее «близкие по тематике» материалы.
        Понятное дело, что мое мнение может не совпадать с мнением как держателей сайта, так и посетителей.
        Если, все же, сделаете, не сочтите за труд сообщить.
        Графу e-mail я заполнил.

        • Трофим

          Еще пару слов вдогонку.
          Хорошая мысля приходит опосля.
          Возможно, это легко делается с помощью плагина jQuery.cookie.
          Но в чем изюминка, или, как говорится «цимус», ваших уроков о табах? В том, что все реализуется десятком строк кода. И это возможно даже без подключения к инету.
          Это именно мой случай. Не будем обсуждать почему. Каждый сходит с ума по-своему.
          Вот поэтому функция запоминания без jQuery была бы несомненно полезна.

  13. Екатерина

    Хотела установить ваши табы на сайт Юкоз, но они почему-то ломают весь дизайн. Отчего этого может быть? Или может быть они с Юкозом не совместимы?

    • Андрей Кудлай

      Как минимум нужно посмотреть сайт, чтобы ответить на вопрос.

      • Екатерина

        Вкладки пытаюсь реализовать на тестовом сайте, чтобы не ломать текущий рабочий сайт. Вот какая ерунда происходит с сайтом. Он сжимается и становится узкий akulaz.at.ua/publ/igry/kinokhit/1-1-0-13

        • Андрей Кудлай

          Если откроете консоль, то увидите там ошибки, связанные с кодом вкладок. Попробуйте убрать комментарии из кода, который вставляете. Это первый момент.
          Относительно стилей, то я в Вашем файле стилей my.css не нашел стилей вкладок… либо Вы их не добавили, либо не сохранили файл, либо нужно почистить кэш, если таковой используется.

          • Екатерина

            Не понимаю, о каких комментариях идет речь? Код снесла специально, потому что сайт ломается, но если надо, могу вернуть.
            На Юкозе есть специальный раздел, который так и называется CSS, где прописаны все-все стили, туда я и добавила ваш код.

          • Андрей Кудлай

            В коде вкладок есть комментарии кода, т.е. текст, поясняющий, что делает та или иная строка кода. Вот эти комментарии и нужно удалить, оставив только код и ничего больше. Относительно того, что Вы добавили и куда, то ведь это легко проверить: в исходном коде откройте файл стилей, в который Вы что-то добавили, и попробуйте там найти новые правила. На данный момент там их нет.
            Екатерина, дальнейшее обсуждение давайте перенесем на наш форум, который специально создавался для решения подобных вопросов.

      • Екатерина

        Стили CSS добавляю не отдельным файлом, а просто копирую их и вставляю туда, где прописаны все стили сайта.

  14. Екатерина

    Забыла сказать, что дизайн сайта ломается после того, как добавляю CSS стили вкладок

  15. Александр

    Большое вам спасибо за ваши уроки!
    Прошел курс по вордпрессу — супер!
    Для начала с головой и больше хватило))

  16. Александр

    Будьте добры, подскажите, где допустил ошибку:
    $(‘#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'});

  17. Марат

    Приветствую. Большое спасибо за статью, особенно за наглядный видео пример. Теперь благодаря Вам — знаю как самому , руками, без всякого мусора (плагинов и прочего) прикручивать табы . Добра Вам, а нам — побольше подобных видеоуроков от Вас)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree