How to programmatically select a tab?

Question

I am using a mdl tabbar from the layout component page.

  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
    </div>
  </header>

Do I have to add/remove the "is-active" class on both tab / panel or is there a simpler way to select a tab programmatically?

Answer 1

You can simulate a Click event by using the Click() method on a DOM Element.

document.getElementById("AnchorTagId").click()

Answer 2

you can simulate a click in the tab button with jquery

ex (programmatically active the second tab - index 1):

$(".mdl-layout__tab:eq(1) span").click ();

ex (programmatically active the first tab - index 0):

$(".mdl-layout__tab:eq(0) span").click ();

Answer 3

with mdl (@version v1.2.1)

you can simulate a click event with jQuery :

$(".mdl-tabs__tab:eq(0) span").click (); //for the first tab (index 0)
$(".mdl-tabs__tab:eq(1) span").click (); //for the second tab (index 1)

...

Tested on Firefox 50.0 - 50.0.2 and Microsoft Edge 38.14393.0.0