Как работает код?

Question

[Александр Корегин]

Доброго времени суток, у меня есть два разных куска кода. Первой написал я, второй мой знакомый. Суть код заключается в переключение табов, но у знакомого работает fade-эффект, а у меня нет.

Принцип работы fade-эффекта брали вот тут https://getbootstrap.com/docs/4.5/components/navs/... (Сначала активируем элемент, после показываем его)

Вот css стили для работы fade-эффекта

& > div
            display: none

        & > .active
            display: flex

        & > .fade
            transition: opacity .15s linear;

        & > .fade:not(.show)
            opacity 0

А вот разметка html

<div class="tabs__content wrap-1">
            <div class="tabs__nav-tabs">
                <div id="complexes" class="tabs__nav-tab">Все жилые комплексы</div>
                <div id="flowers" class="tabs__nav-tab" style="dispay:none">ЖК «Цветы»</div>
                <div id="olympic" class="tabs__nav-tab" style="dispay:none">ЖК «Олимпийский»</div>
                <div id="aurora" class="tabs__nav-tab" style="dispay:none">ЖК «Аврора Парк»</div>
            </div>
        </div>

Мой код:

const navItems = document.querySelectorAll(".tabs__nav-item");
const navTabs = document.querySelectorAll(".tabs__nav-tab");
let navItemData;

navItems.forEach((item) => {
  item.addEventListener("click", selectTab);
});

function selectTab() {
  event.preventDefault();

  navItems.forEach((item) => {
    item.classList.remove("active");
  });

  event.currentTarget.classList.add("active");

  navItemData = event.currentTarget.getAttribute("href");

  openTab(navItemData);
}

function openTab(navItemData) {
  navTabs.forEach((item) => {
    item.classList.remove("active");
    item.classList.remove("show");
  });

  navTabs.forEach((item) => {
    if (item.id === navItemData.split("#")[1]) {
      item.classList.add("active");
      item.classList.add("show");
    }
  });
}

Код друга

class TabView {
  _host;
  _tabElems;
  _panelElems;
  _tabsMap = {};
  _activeTab;

  _tabActiveCls = "active";

  _changeEventName = "tab-view:change";
  _tabElemAttrIndex = "data-tab-elem-index";

  constructor(elem) {
    this._host = elem;
    this._tabElems = elem.querySelectorAll(".tabs__nav-item");
    this._panelElems = elem.querySelectorAll(".tabs__nav-tab");
    elem.tabViewComponent = this;

    this._init();
  }

  _init() {
    this._createTabMap();
    this._initActiveTab();
    this._emitChangeEvent(this._activeTab);

    this._tabElems.forEach((e) =>
      e.addEventListener("click", this._activateTab.bind(this))
    );
  }

  _createTabMap() {
    this._tabElems.forEach((e, i) => {
      e.setAttribute(this._tabElemAttrIndex, i);
      this._tabsMap[e.innerText] = this._panelElems[i];
    });
  }

  _initActiveTab() {
    this._tabElems.forEach((e) => {
      if (e.classList.contains(this._tabActiveCls)) this._activeTab = e;
    });
  }

  _activateTab(event) {
    event.preventDefault();

    const tabElem = event.currentTarget;

    if (this._activeTab == tabElem) return;

    this._activeTab = tabElem;

    this._setActiveClsOnTab(this._activeTab);
    this._setActiveClsOnPanel(this._activeTab);

    this._emitChangeEvent(this._activeTab);
  }

  _setActiveClsOnTab(tabElem) {
    this._tabElems.forEach((e) => e.classList.remove(this._tabActiveCls));
    tabElem.classList.add(this._tabActiveCls);
  }

  _setActiveClsOnPanel(tabElem) {
    const panelActiveCls = "active";
    const panelShowCls = "show";

    this._panelElems.forEach((e) => e.classList.remove(panelActiveCls));
    this._panelElems.forEach((e) => e.classList.remove(panelShowCls));
    this._tabsMap[tabElem.innerText].classList.add(panelActiveCls);
    this._tabsMap[tabElem.innerText].classList.add(panelShowCls);
  }

  /**
   * @param {HTMLElement} tabElem
   */
  _emitChangeEvent(tabElem) {
    // const index = tabElem.getAttribute(this._tabElemAttrIndex);
    // this._changeBehaviorSubject.next(index);
  }
}

document.querySelectorAll(".tabs").forEach((e) => new TabView(e));

Answer 1

[Stockholm Syndrome]

function selectTab(/* ничего не забыто? */) {
  event.preventDefault();