В этой статье мы реализуем вкладки с любым содержимым при помощи библиотеки 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"); // Показываем и добавляем активный класс соответствующему контейнеру
}
});
});
Вот и всё, наш таббер(или другими словами вкладки) контента готов.
Результат проделанной работы вы сможете посмотреть на демо-странице:
Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.
В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.
Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:
Мы обнаружили, что у вас установлено расширение AdBlock или программа Adguard или другое ПО, блокирующее показ рекламы на сайте. Мы прекрасно понимаем Вас, но реклама - единственный способ заработка сайта, его отсутствие мешает развитию. Поэтому хотели бы Вас попросить отключить блокирование рекламы на сайте. Со своей стороны обещаем не добавлять навязчивую рекламу - которая будет перекрывать сайт или открывать новые вкладки. Как отключить блокировку рекламы в adBlock Как отключить блокировку рекламы в Adguard В противном случае это сообщение будет переодически показываться Вам, большое спасибо за понимание.
Добавить комментарий
Авторизоваться с помощью: