JQuery tabs. Простые jQuery вкладки
01.09.2018
jQuery Tutorial #5 - Building a jQuery Tab Panel Widget
1. Для начала необходимо создать HTML структуру для будущих вкладок. <h1>Простые вкладки</h1> <ul id="tabs"> <li><a href="#description">Описание</a></li> <li><a href="#photos">Фото</a></li> <li><a href="#details">Подробное описание</a></li> <li><a href="#reviews">Обзоры</a></li> <li><a href="#related">Товары</a></li> </ul> <div class="tabs-block"> <div id="description" class="tab-section"> <h2>Описание</h2> <p>Этот раздел содержит описание товаров.</p> </div> <div id="photos" class="tab-section"> <h2>Фото</h2> <p>Этот раздел содержит фотографии товаров.</p> </div> <div id="details" class="tab-section"> <h2>Подробное описание</h2> <p>Этот раздел содержит подробное описание – размер, вес, цвет, материалы и т.д.</p> </div> <div id="reviews" class="tab-section"> <h2>Обзоры</h2> <p>Этот раздел содержит обзоры товаров</p> </div> <div id="related" class="tab-section"> <h2>Товары</h2> <p>Этот раздел содержит список покупаемых товаров.</p> </div> </div>
jQuery tabs in asp net
Данный HTML код начинается со списка, состоящего из ссылок. Щелкая по данным ссылкам, в конечном итоге, будет отображаться соответствующий <div> контейнер, все остальные контейнеры будут скрыты. 2. Теперь необходимо использовать jQuery для скрытия <div> контейнеров. Для этого пропишем в подключаемом файле scripts.js следующий код: $(document).ready(function(){ $('.tab-section').hide(); });
Теперь, после загрузки страницы, пользователь увидит только список, состоящий из ссылок! 3. Затем, мы должны предотвратить срабатывание ссылки , когда по одной из них будет произведен щелчок. Для этого привяжем функцию к ссылкам. $(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ e.preventDefault; }); });
Теперь при клике по ссылке, переход по ней производиться не будет, собственно, за это действие и отвечает preventDefault . 4. Далее, необходимо сделать так, чтобы при клике по ссылке отображалось соответствующий контейнер с контентом. Для этого добавим $(this.hash).show() перед e.preventDefault из предыдущего пункта. $(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $(this.hash).show(); e.preventDefault; }); });
Конструкция $(this.hash).show() означает, что при клике по ссылке, необходимо отобразить контейнер, id которого совпадает со значением href ссылки. Hash – возвращает значение href ссылки. Другими словами, если вы кликаете по ссылке, у которой параметр href="#description”, то конструкция $(this.hash).show() будет равносильна $(#description).show() . 5. Теперь, если кликнуть на какую-нибуть ссылку, то отобразиться связанный с ней контейнер. Однако, если продолжать кликать по другим ссылкам, новые контейнеры станут видимыми, а старые не исчезнут. Давайте исправим это, добавив конструкцию $('.tab-section:visible').hide() , которая означает, что при клике видимые элементы с классом tab-section должны исчезнуть: $(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $('.tab-section:visible').hide(); $(this.hash).show(); e.preventDefault; }); });
6. Все, основной код для jQuery tabs написан и вкладки имеют законченный вид. Осталось только добавить css стили в подключаемый файл styles.css : .tabs-block { border: 2px solid #ccc; margin-top: -2px; } #tabs { overflow: hidden; margin: 0; padding: 0; } #tabs li { display: block; list-style: none; float: left; } #tabs li a { display: block; padding: 2px 5px; border: 2px solid #ccc; border-bottom: 0 none; text-align: center; text-decoration: none; } .tab-section { padding: 10px; } #tabs li a.current { background: #fff; color: #000; }
7. После добавления стилей, вкладки стали красиво выглядеть, но непонятно какая из них активна в данный момент. Исправить это можно, добавив специальный класс к активной вкладке: $(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $('#tabs a.current').removeClass('current'); //Убираем класс после клика $('.tab-section:visible').hide(); $(this.hash).show(); $(this).addClass('current'); //Добавляем класс после клика к той ссылке, по которой был произведен клик e.preventDefault; }); });
В файл стилей styles.css добавим класс: #tabs li a.current { background: #fff; color: #000; }
8. Последний штрих: сделаем так, чтобы при загрузке страницы первая jQuery вкладка стала активной. Добавим filter(':first').click() : $(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $('#tabs a.current').removeClass('current'); $('.tab-section:visible').hide(); $(this.hash).show(); $(this).addClass('current'); e.preventDefault; }).filter(':first').click(); });
При помощи фильтра и псевдокласса first , мы произведем автоматический клик по первой вкладке, сразу же после загрузке страницы. Наши jQuery вкладки готовы!
Демо Скачать [27,34 Kb] (cкачиваний: 382)