zoxon
8/7/2015 - 8:49 AM

tabs.js

var tabs = {
	hide: {
		'visibility': 'hidden',
		'opacity': 0,
		'height': 0
	},
	show: {
		'visibility': 'visible',
		'opacity': 1,
		'height': 'auto'
	},
	class: {
		panels: 'b-tab-panels',
		nav: 'b-tab-nav',
		item: 'item',
		selected: 'selected'
	}
};

var itemClass = tabs.class.nav + '__' + tabs.class.item;
var selectedClass = itemClass + '_' + tabs.class.selected;
var panelsItemClass = tabs.class.panels + '__' + tabs.class.item;

// Первой вкладке добавляетсякласс select
$('.'+itemClass+':first').addClass(selectedClass);

// Скрываются все блоки с описанием вкладок кроме первого
$('.'+panelsItemClass).css(tabs.hide).filter(':first').css(tabs.show);

// При клике на вкладку
$('.'+tabs.class.nav+' a').click(function(){
	// - показывается блок с описанием текущей вкладки
	$('.'+panelsItemClass).css(tabs.hide).filter(this.hash).css(tabs.show);

	// - удаляется класс 'select' у активной ранее вкладки
	$('.'+itemClass).removeClass(selectedClass);

	// - добавляется класс 'select' для выбранной вкладки
	$(this).parent().addClass(selectedClass);

	// - прерывается обработка события onClick
	event.preventDefault();
});