index.php

<!-- Template Yii2 -->
<?php $this->registerJsFile(Yii::$app->homeUrl . 'js/selectTabs.js', ['depends' => [yii\web\JqueryAsset::class]]); ?>

selectTabs.js

/**
 * Interface data Tab
 * @typedef {Object} Tab
 * @property {String} url
 * @property {String} tab
 */

/**
 * Select current tab
 * @author EduardoMay
 * @version 2.0
 * @todo Cambiar el valor por el nombre del sistema
 */
 class SelectTabs {
  nameStorage;
  tabElements;

  /**
   *
   * @param {string} app
   * @param {array} tabElements
   */
  constructor(app, tabElements) {
    this.nameStorage = app;
    this.tabElements = tabElements;
  }

  init() {
    this.isEmpty();
    this.runEvents();
  }

  /**
   * Set item in sesionStorage
   * @param {*} value
   * @returns {this}
   */
  setSesionStorage(value) {
    sessionStorage.setItem(this.nameStorage, value);
    return this;
  }

  /**
   * Get tabs
   * @returns {Tab[]}
   */
  getTabs() {
    return sessionStorage.getItem(this.nameStorage)
      ? JSON.parse(String(sessionStorage.getItem(this.nameStorage)))
      : [];
  }

  /**
   * Get current tab
   * @returns {Tab}
   */
  currentView() {
    if (this.getTabs().length === 0) return { url: location.href, tab: 'tab_1' };
    else {
      const view = this.getTabs().find((e) => e.url === location.href);

      return view?.url ? view : { url: location.href, tab: 'tab_1' };
    }
  }

  isEmpty() {
    if (this.getTabs().length === 0)
      this.setSesionStorage(
        JSON.stringify([{ url: location.href, tab: 'tab_1' }])
      );
  }

  runEvents() {
    const { _, tab } = this.currentView();

    this.tabElements.forEach((e, idx) => {
      const hrefE = e.hash.replace('#', '');
      const parentNode = e.parentNode;
      const currentTab = document.getElementById(tab);

      if (currentTab && tab === hrefE) {
        parentNode.classList.add('active');
        document
          .querySelector(`.tab-pane#${hrefE}`)
          .classList.add('active', 'in');
      } else {
        if (!currentTab && !idx) {
          parentNode.classList.add('active');
          document
            .querySelector(`.tab-pane#tab_1`)
            .classList.add('active', 'in');
        } else {
          document
            .querySelector(`.tab-pane#${hrefE}`)
            .classList.remove('active', 'in');
        }
      }

      e.addEventListener('click', (e) => {
        const hrefE = e.target.parentElement.hash
          ? e.target.parentElement.hash.replace('#', '')
          : e.target.hash.replace('#', '');
        const tabs = this.getTabs().filter((e) => e.url !== location.href);
        const setTab = [...tabs, { url: location.href, tab: hrefE }];

        this.setSesionStorage(JSON.stringify(setTab));
      });
    });
  }
}

const dataToggle = document.querySelectorAll('.nav-tabs a[data-toggle=tab]');

const selectTabs = new SelectTabs('partners', dataToggle);
selectTabs.init();

template.html

<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        <li><a href="#tab_1" data-toggle="tab">Detalles</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane" id="tab_1">

        </div>
    </div>
</div>