Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » jQuery tabs - простые вкладки RSS
дек 16 2012 photo

jQuery tabs - простые вкладки

admin 13 167
  • 80
  • 1
  • 2
  • 3
  • 4
  • 5

jQuery tabs - простые вкладки


Если у вас есть большое количество информации, но свободное место на сайте отсутствует, то лучшим решением этой проблемы будет создание  jQuery tabs. jQuery вкладки скрывают часть контента, занимая при этом значительно меньше места.

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>

 

Данный 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качиваний: 392)

Теги: jQuery tabs

HashFlare
Другие новости по теме:
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Конверсия интернет-магазина. Повышение продаж
  • Лендинг или сайт? Что лучше?
  • JQuery 2.0 вышел официально!
  • Что такое JQuery Mobile? Почему JQuery Mobile? Как использовать JQuery Mobile?

Комментарии к: jQuery tabs - простые вкладки (1)

    1. №1  x-only 08-03-2013 Цитировать
      Хороший урок, узнал много нового, особенно полезно было узнать про конструкцию this.hash!
Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Конверсия интернет-магазина. Повышение продаж
  • Лендинг или сайт? Что лучше?
  • JQuery 2.0 вышел официально!
  • Что такое JQuery Mobile? Почему JQuery Mobile? Как использовать JQuery Mobile?
  • Популярное
  • Авторизация
  • Как закрыть ссылку от индексации при помощи javascript
  • На каком движке делать интернет-магазин. PrestaShop или OpenCart?
  • Принципы резиновой верстки сайта
  • Как выявить дополнительные резервы для продвижения в поиске
  • Обратные ссылки на сайт: чем они полезны в SEO продвижении?
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Плавная прокрутка страницы сайта
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Лучшие движки для сайтов: преимущества и недостатки
  • Парсер контента от Datacol
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015