CODEWITHSUNDEEP
material-design-lite
dflorey
dflorey

Reputation: 1834

How to programmatically select a tab?

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?

Upvotes: 11

Views: 9226

Answers (8)

Tanavirrul haq
Tanavirrul haq

Reputation: 11

its working for me

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

Upvotes: 0

Toby 1 Kenobi
Toby 1 Kenobi

Reputation: 5037

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

Upvotes: 1

Gerard Simpson
Gerard Simpson

Reputation: 2126

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();
});

Upvotes: 0

damien
damien

Reputation: 11

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

Upvotes: 1

De Wet Ellis
De Wet Ellis

Reputation: 750

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

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

Upvotes: 9

Fabio de Toledo
Fabio de Toledo

Reputation: 153

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 ();

Upvotes: 6

DMack
DMack

Reputation: 949

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');

Upvotes: 12

Garbee
Garbee

Reputation: 10981

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.

Upvotes: 1

Related Questions