Tabs (js + css

by Dmitry Nazarov

HTML

<div class="vews-front-header">
  <div class="vews-front-header__tabs">
    <div class="vews-front-header__tab1 tab-active">
      {{ fields.nothing.content }}   {# Новости #}
    </div>
    <div class="vews-front-header__tab2">
      {{ fields.nothing_1.content }}   {# Новости регионов #}
    </div>
    <div class="vews-front-header__tab3">
      {{ fields.nothing_2.content }}   {# СМИ о нас #}
    </div>
  </div>
  <div class="views-front-header__news tab-active">
    {{ fields.view.content }}   {# Новости #}
  </div>
  <div class="views-front-header__region-news tab-close">
    {{ fields.view_1.content }}   {# Новости регионов #}
  </div>
  <div class="views-front-header__media-about-us tab-close">
    {{ fields.view_2.content }}   {# СМИ о нас #}
  </div>
</div>

CSS

.vews-front-header__tabs {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.vews-front-header__tab1,
.vews-front-header__tab2,
.vews-front-header__tab3 {
    background-color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #283c86;
    border-radius: 4px;
    border: none;
}

.vews-front-header__tab1.tab-active,
.vews-front-header__tab2.tab-active,
.vews-front-header__tab3.tab-active {
    background-color: #325c92;
    color: #fff;
}

.views-front-header__news.tab-close,
.views-front-header__region-news.tab-close,
.views-front-header__media-about-us.tab-close {
    display: none;
}

JavaScript

$(function () {
    $('.vews-front-header__tab1').click(function () {
        $('.views-front-header__news').addClass('tab-active');
        $('.views-front-header__news').removeClass('tab-close');
        $('.views-front-header__region-news').addClass('tab-close');
        $('.views-front-header__region-news').removeClass('tab-active');
        $('.views-front-header__media-about-us').addClass('tab-close');
        $('.views-front-header__media-about-us').removeClass('tab-active');
        $('.vews-front-header__tab1').addClass('tab-active');
        $('.vews-front-header__tab1').removeClass('tab-close');
        $('.vews-front-header__tab2').addClass('tab-close');
        $('.vews-front-header__tab2').removeClass('tab-active');
        $('.vews-front-header__tab3').addClass('tab-close');
        $('.vews-front-header__tab3').removeClass('tab-active');
    });
    $('.vews-front-header__tab2').click(function () {
        $('.views-front-header__region-news').addClass('tab-active');
        $('.views-front-header__region-news').removeClass('tab-close');
        $('.views-front-header__news').addClass('tab-close');
        $('.views-front-header__news').removeClass('tab-active');
        $('.views-front-header__media-about-us').addClass('tab-close');
        $('.views-front-header__media-about-us').removeClass('tab-active');
        $('.vews-front-header__tab1').addClass('tab-close');
        $('.vews-front-header__tab1').removeClass('tab-active');
        $('.vews-front-header__tab2').addClass('tab-active');
        $('.vews-front-header__tab2').removeClass('tab-close');
        $('.vews-front-header__tab3').addClass('tab-close');
        $('.vews-front-header__tab3').removeClass('tab-active');
    });
    $('.vews-front-header__tab3').click(function () {
        $('.views-front-header__media-about-us').addClass('tab-active');
        $('.views-front-header__media-about-us').removeClass('tab-close');
       ...