11

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?

dflorey
  • 1,766
  • 2
  • 16
  • 29

8 Answers8

12

As far as I can tell, manually changing the is-active class on the tabs (.mdl-layout__tab) and the tab panels (.mdl-layout__tab-panel) does produce the desired results, though.

With jQuery: 

            // remove all is-active classes from tabs
            $('a.mdl-layout__tab').removeClass('is-active');
            // activate desired tab
            $('a[href="#fixed-tab-2"]').addClass('is-active');
            // remove all is-active classes from panels
            $('.mdl-layout__tab-panel').removeClass('is-active');
            // activate desired tab panel
            $('#fixed-tab-2').addClass('is-active');
DMack
  • 721
  • 1
  • 7
  • 19
  • 1
    This is much less clean than simulating a click event – Gerard Simpson Dec 11 '17 at 02:05
  • In my case, this did not change the tab-panel to the correct one, so you will either need to also show the panel, or *just simulate an onClick event with the click() function*. – Kade Mar 10 '20 at 12:07
9

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

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

De Wet Ellis
  • 630
  • 6
  • 7
6

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 ();
Fabio de Toledo
  • 153
  • 1
  • 7
  • do you know why it wotks with code: $(".mdl-tabs__tab:eq(0)").get(0).click(); and does not work with: $(".mdl-tabs__tab:eq(0)").click(); — like your example? – Pax Beach Apr 16 '17 at 08:30
  • This answer is correct and the others are incorrect, purely because this answer recognizes that the click event must be on the inside of the – rgbflawed Sep 13 '18 at 04:10
1

Currently there is no programmatic way to switch layout tabs or normal tabs. The objects used to handle these are not exposed via the widget system, so there is no instructing them of what to do.

Please file a feature request on the issue tracker so we have something actionable for future releases.

Garbee
  • 9,341
  • 4
  • 34
  • 39
1

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

DomQ
  • 3,346
  • 30
  • 32
damien
  • 11
  • 2
0

A solution with jQuery including previous/next functionality:

$('#next-button').on('click', function() {
    $('.mdl-tabs__tab.is-active').next().find('span').click();
  });

$('#prev-button').on('click', function() {
   $('.mdl-tabs__tab.is-active').prev().find('span').click();
});
Gerard Simpson
  • 1,757
  • 1
  • 23
  • 40
0

It looks like this functionality has been included in the MDL code since June 2017 https://github.com/google/material-design-lite/pull/5091

but there hasn't been a release since Dec 2016

Toby 1 Kenobi
  • 3,859
  • 2
  • 21
  • 41
0

its working for me

$('#tabid').tabs('select', 'select-Id');

Tanavirrul haq
  • 11
  • 3