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 и показываем его. 
    }
  });

Все.