tabs

tabs.js

.tabs
ul.tabs - navigation
li(show - tab="tab-hits").tabs - navigation__item.tabs - navigation__item--active Hits
li(show - tab="tab-benefits").tabs - navigation__item Benefits
li(show - tab="tab-new").tabs - navigation__item New
	.tabs__body
	.tab.tab--active.tab - hits
h2 tabs - hits content
	.tab.tab - benefits
h2 tabs - benefits content
	.tab.tab - new
		h2 tab - new content


			.tabs - navigation__item
cursor pointer

	.tabs - navigation__item--active
color red

	.tab
display none

	.tab--active
display block
color yellow

let tabs = function () {
	$('.tabs-navigation__item').on('click', function () {
		let tabName = $(this).attr('show-tab');
		console.log(tabName);

		$(this)
			.addClass('tabs-navigation__item--active')
			.siblings()
			.removeClass('tabs-navigation__item--active');

		$('.tabs__body .' + tabName).addClass('tab--active').siblings().removeClass('tab--active');

	});
};

tabs();