How to show a certain tab in toolbar-tabbar programatically

Have the following toolbar-tabbar HTML:

<div class="toolbar tabbar tabbar-labels color-theme-gray" id="tab-ruta-gestion-comercial">
    <div class="toolbar-inner">
      <a href="#gestion-comercial-tab-1" class="tab-link tab-link-active" id="gestion-comercial-tab-link-lista">
        <!-- Different icons for iOS and MD themes -->
        <i class="icon f7-icons if-not-md">list_dash</i>
        <!-- Label text -->
        <span class="tabbar-label">Orden</span>
      </a>
      <a href="#gestion-comercial-tab-2" class="tab-link" id="gestion-comercial-tab-link-filtros">
        <i class="icon f7-icons if-not-md">slider_horizontal_3</i>
        <span class="tabbar-label">Filtros</span>
      </a>
      <a href="#gestion-comercial-tab-3" class="tab-link" id="gestion-comercial-tab-link-mapa">
        <i class="icon f7-icons if-not-md">map_fill</i>
        <span class="tabbar-label">Mapa</span>
      </a>
    </div>
  </div>
  <!-- Tabs -->
  <div class="tabs">
    <!-- First tab, active -->
    <div class="page-content tab tab-active" id="gestion-comercial-tab-1">

    </div>
    <!-- Second tab -->
    <div class="page-content tab" id="gestion-comercial-tab-2">

    </div>
    <!-- Third tab -->
    <div class="page-content tab" id="gestion-comercial-tab-3">
        
    </div>
  </div>

I need to show third tab, I did:
app.tab.show('#tab-ruta-gestion-comercial', '#gestion-comercial-tab-link-mapa');

But nothing happens, am I doing it allright?

According to your HTML it should be:

app.tab.show('#gestion-comercial-tab-3');
1 Like

You are Genius man, thank you!