Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

Табы

Открыть содержание
JavaScript

Для начала, расскажу что такое ТАБЫ! Это когда у вас есть несколько разделов, но показывать нужно только один и переключаться между этими разделами можно с помощью кнопочек. В общем, посмотрите на работающую идею:

Вы можете кликать на названиям разделов, а внизу откроется соответствующий раздел.

Это урок очень маленький и простой, но дает платформу для реализации очень большого функционала. Я когда понял принципы, которые реализую здесь, то жизнь стала проще и интереснее)

Давайте разбираться с кодом по этапам: 

Верстка:

<div class="block_tabs">
	<div class="top_tabs">
		<div class="button_tab button_tab_active" id="1">Раздел 1</div>
		<div class="button_tab" id="2">Раздел 2</div>
		<div class="button_tab" id="3">Раздел 3</div>
	</div>
	<div class="content_tabs">
		<div class="tab tab_1">
			<h2>Раздел 1</h2>
			
		</div>
		<div class="tab tab_2">
			<h2>Раздел 2</h2>
			
		</div>
		<div class="tab tab_3">
			<h2>Раздел 3</h2>
			
		</div>
	</div>
</div>

Код делится на две составляющие: Верхнее меню с кнопками - .top_tabs, блок под контент - .content_tabs

У каждой кнопки есть свой ID, а у каждого раздела есть уникальный class, который содержит в себе этот id. Таким образом, мы будем ассоциировать кнопку и раздел. 

Так же, у первой кнопки стоит класс button_tab_active, который делает кнопку активной (добавляет серого). Мы будем этот класс добавлять только к той кнопке, которая активна в данный момент. 

Хочу заметить, что для этого класса стоит свойство cursor: default;. Это нужно для того, чтобы при наведении курсор мыши показывал, что кнопка не активна и кликать по ней бесполезно. Если раздел уже открыт, зачем его открывать еще раз?

Все разделы у нас скрыты:

.tab{
  display: none;
}

Но первый раздел мы показываем: 

.tab_1{
  display: block;
}

Логика работы.

  1. Кликаем по кнопке
  2. Определяем ее ID
  3. По ID находим соответствующий раздел
  4. Показываем найденный раздел и скрываем остальные
  5. Назначаем кнопке класс button_tab_active и убираем его для той кнопки, которая была активна до этого

JavaScript

Тут нет ничего сложного, поэтому я просто прокомментирую весь код:

$('.button_tab').click(function(){ //Обрабатываем клик по кнопке
    var id=$(this).attr('id'); //Получаем id кнопки 

    if(!$(this).hasClass('button_tab_active')){ /* Проверяем содержит ли кнопка класс button_tab_active
      Если кнопка содержит класс button_tab_active - это значит, что она уже активна и дополнительных действий производить не надо*/

      $('.button_tab').removeClass('button_tab_active'); //Для всех кнопок удаляем класс button_tab_active
      $(this).addClass('button_tab_active'); //Добавляем класс button_tab_active только для кнопки по которой кликнули

      $('.tab').slideUp(); //Скрываем все разделы
      $('.tab_'+id).slideDown() ; //Находим раздел по ID и показываем его. 
    }
  });

Все.

Предыдущий урок
Политика конфиденциальности   Пользовательское соглашение