Add public method setTab to set the active tab programmatically

[eKoopmans]

• Allows the active tab to be set programmatically, by element or index
• This previously had to be accomplished by invoking .click() on the chosen tab element

Closes #5068

[Garbee]

LGTM thank you!

[toby-1-kenobi]

I can't find any documentation on how to use this.

[eKoopmans]

Hey @toby-1-kenobi, good point - here's some documentation. Given the following HTML:

<div class="mdl-tabs mdl-js-tabs" id="myTabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#panel1" class="mdl-tabs__tab is-active" id="firstTab">Panel 1</a>
    <a href="#panel2" class="mdl-tabs__tab>Panel 2</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="panel1">
    <p>Panel 1 contents</p>
  </div>
  <div class="mdl-tabs__panel is-active" id="panel2">
    <p>Panel 2 contents</p>
  </div>
</div>

You can use setTab to change the tab programmatically, as follows:

var myTabs = document.getElementById('myTabs');
var mdlTabs = myTabs.MaterialTabs;

// Change focus to the second tab, using index.
mdlTabs.setTab(1);

// Change focus back to the first tab, using the tab element.
mdlTabs.setTab(document.getElementById('firstTab'));