<nav class="pageNav">
  <div class="pageNav__tabList">
    <div class="pageNav__tabItem pageNav__tabItem--active">1</div>
    <div class="pageNav__tabItem">2</div>
    <div class="pageNav__tabItem">3</div>
  </div>
  
  <div class="pageNav__contentList">
    <div class="pageNav__contentItem pageNav__contentItem--active">Первый контент</div>
    <div class="pageNav__contentItem">Второй контент</div>
    <div class="pageNav__contentItem">Третий контент</div>
  </div>
  
  <div class="pageNav__price">
    <div class="pageNav__priceItem">18</div>
  </div>
</nav>

.pageNav{
  width: 500px;
  
  &__tabList{
    display: flex;
    justify-content: space-between;
  }
  
  &__tabItem{
    flex-grow: 1;
    height: 40px;
    background: lightgreen;
    margin: 5px;
    cursor: pointer;
    
    &--active{
      background: lightblue;
    }
  }
  
  &__contentList{
    background: #eee;
    margin: 5px;
    padding: 20px;
  }
  
  &__contentItem{
    font-size: 24px;
    padding: 20px;
    
    &--active{
      background: lightblue;
    }
  }
  
  &__priceItem {
    margin: 5px;
    background: pink;
    height: 40px;
    
    &.pageNav__priceItem--active_1 {
      background: red;
    }
    &.pageNav__priceItem--active_2 {
      background: yellow;
    }
    &.pageNav__priceItem--active_3 {
      background: green;
    }
  }
}

const TabItemSelector = '.pageNav__tabItem';
const ContentItemSelector = '.pageNav__contentItem';


class TabsManager {
  constructor(navNode){
    this.tabs = [];
    this.activeTab = null;

    this.initFromHtml(navNode);
    
    this.activateTab(this.tabs[0]);
  }

  initFromHtml (navNode) {
    const headers  = navNode.querySelectorAll(TabItemSelector);
    const contents = navNode.querySelectorAll(ContentItemSelector);

    for (var i = 0; i < headers.length; i++) {
        this.registerTab(headers[i], contents[i]);
    }
  }

  registerTab (header, content) {
    const tab = new TabItem(header, content);
    tab.onActivate(() => this.activateTab(tab));
    this.tabs.push(tab);
  }
  
  activateTab (tabItem) {
    if (this.activeTab) {
        this.activeTab.setActive(false);
    }

    this.activeTab = tabItem;
    this.activeTab.setActive(true);
  }
  
}

const ActiveTabHeaderClass = 'pageNav__tabItem--active';
const ActiveTabContentClass = 'pageNav__contentItem--active';

class TabItem {
    constructor (header, content) {
        this.header  = header;
        this.content = content;
    }
    onActivate (action) { 
        this.header.addEventListener('click', () => {
          action(this);
          let pos = this.header.innerHTML;
          let classActivePos = `pageNav__priceItem--active_${pos}`;
          document.querySelector('.pageNav__priceItem').className = 'pageNav__priceItem';
          document.querySelector('.pageNav__priceItem').classList.add(classActivePos);
        });
      
    }
    setActive(value) {
        this.header.classList.toggle(ActiveTabHeaderClass, value);
        this.content.classList.toggle(ActiveTabContentClass, value);
    }
}

document.addEventListener('DOMContentLoaded', ()=>{
  let tabs = new TabsManager(document.querySelector('.pageNav'));
})