slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 6745
Теги: javascript, jQuery, tabs, tab

В этой статье мы реализуем вкладки с любым содержимым при помощи библиотеки jQuery.

Данный способ очень простой и укладывается буквально в 10 строк js-кода.

Для начала подготовим разметке для наших будущих табов:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Демо-страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/tabs.js"></script>
</head>
<body>
	<ul class="tabs_menu">
		<li class="active">Первый</li>
		<li>Второй</li>
		<li>Третий</li>
	</ul>
	<div class="tabs">
		<div class="info active">
			Какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст
			<img src="/images/image1.jpg" />
		</div>
		<div class="info">
			<img src="/images/image2.jpg" />
			Какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст
		</div>
		<div class="info">
			Какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст
			<img src="/images/image3.jpg" />
			Какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст
		</div>
	</div>
	<br>
	<p>Какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст</p>
</body>
</html>

Состоять наши вкладки будут из меню tabs_menu, щелкая по которому и будет происходить переключение. Блока с содержимым вкладок tabs, каждый из контейнеров для новой вкладки будет иметь класс info. Активному табу в меню и контейнеру в tabs будет так же добавляться класс active. Внутри контейнера для каждого таба помещаем разнообразное содержимое и после всей конструкции ещё одну строчку текста, чтобы проверять, не будет ли при смене слайдов уезжать эта строка вверх к меню.

Следующий шаг - подготовить стили, мы не стали слишком мудрить со стилями, поэтому и виду наших вкладок будет простейший:

body {
	margin:0;
	text-align:center;
}

	ul {
	}
		ul li {
			display:inline-block;
			margin:0 20px;
			cursor:pointer;
		}
		
		ul li.active {
			color:#990000;
		}
		
	.tabs {
	}
		.tabs .info{
			display:none;
			width:500px;
			margin:0 auto;
		}
		
		.tabs .info.active{
			display:block;
		}
		
			.tabs .info img{
				width:100%;
			}

Остается только добавить jQuery-код, не забываем подключить его библиотеку, для работоспособности кода в index.html.

Вот сам код с комментариями, который необходимо добавить:

$(document).ready(function() { // Ждём загрузки страницы
	$(".tabs_menu li").click(function() { // Событие нажатия на элемент меню вкладок
		if (!$(this).hasClass("active")) { // Проверка, не нажали ли мы на уже активный пункт
			var i = $(this).index(); // Получаем порядковый номер нажатого пункта, отстче идет от 0 (0,1,2)
			$(".tabs_menu li.active").removeClass("active"); // Удаляем активный класс у прошлого пункта меню
			$(".tabs .active").hide().removeClass("active"); // Скрываем и удаляем активный класс у прошлого контейнера с содержимым
			$(this).addClass("active"); // Добавляем нажатому пункту меню активный класс
			$($(".tabs").children(".info")[i]).fadeIn(1000).addClass("active"); // Показываем и добавляем активный класс соответствующему контейнеру
		}
	});
});

Вот и всё, наш таббер(или другими словами вкладки) контента готов.

Результат проделанной работы вы сможете посмотреть на демо-странице:

demo

А так же можете скачать готовый демо пример:

download

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

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    8.80
  • intuit89
    7.40
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Дарим хорошее настроение и качественный сервис — этого заслуживает каждый наш клиент. Акции, бонусы...
Перейти в тему
ZOMRO аватар
Чем больше — тем дешевле! При заказе услуги VPS или виртуального хостинга и оплате его на длительны...
Перейти в тему
intuit89 аватар
[image] Всем привет! Меня зовут Михаил, я представляю команду, в составе: копирайтер, дизайнер и SM...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.