Jak programowo wybrać kartę?

Question

Używam paska zakładek mdl na stronie komponentu układu.

<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> 

Czy muszę dodać/usunąć „jest czynne” klasę zarówno na karcie/panelu czy istnieje prostszy sposób, aby wybrać kartę programowo?

Answer 1

Obecnie nie ma programowego sposobu przełączania kart układu lub normalnych kart. Obiekty używane do ich obsługi nie są odsłonięte przez system widgetów, więc nie ma instrukcji, co zrobić.

Proszę wysłać zapytanie o funkcję do śledzenia problemów, abyśmy mieli coś, co można by zmienić w przyszłych wydaniach.

Answer 2

ile można stwierdzić, ręcznej zmiany klasę is-active w zakładkach (.mdl-layout__tab) i paneli języczek (.mdl-layout__tab-panel) przynosi pożądane rezultaty, jednak.

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

Answer 3

można symulować kliknięcie w przycisk zakładki z jQuery

ex (programowo aktywną kartę drugą - index 1):

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

ex (programowo aktywna pierwsza zakładka - indeks 0):

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

Answer 4

Można symulować zdarzenie Click, używając metody Click() na elemencie DOM.

document.getElementById ("AnchorTagId") kliknij()

Answer 5

z MDL (@version v1.2.1)

można zasymulować zdarzenie click z 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) 

. ..

Testowane na Firefox 50.0 - 50.0.2 oraz Microsoft Edge 38.14393.0.0

Answer 6

Rozwiązanie z jQuery tym poprzedniego/następnego funkcjonalności:

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

Answer 7

To wygląda ta funkcja została włączona w kodzie MDL od czerwca 2017 https://github.com/google/material-design-lite/pull/5091

ale nie było uwolnienie od grudnia 2016