Как программно выбрать вкладку?

Question

Я использую вкладку mdl со страницы компонента компоновки.

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

Должен ли я добавить/удалить «является активным» классом как на вкладке/панели или есть более простой способ выбрать вкладку программно?

Answer 1

В настоящее время нет программного способа переключения вкладок макета или обычных вкладок. Объекты, используемые для их обработки, не отображаются через систему виджетов, поэтому нет инструкций о том, что делать.

Пожалуйста, напишите запрос о функции на трекер ошибок, чтобы у нас было что-то, что можно было бы предпринять для будущих выпусков.

Answer 2

Насколько я могу судить, ручное изменение класса is-active на вкладках (.mdl-layout__tab), и панели вкладок (.mdl-layout__tab-panel) действительно дают желаемые результаты.

С 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

можно имитировать щелчок на кнопке вкладки с JQuery

ех (программно активной вкладки второй - индекс 1):

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

ех (программно активная первая вкладка - индекс 0):

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

Answer 4

Вы можете имитировать событие Click, используя метод Click() в DOM Element.

document.getElementById ("AnchorTagId") нажмите кнопку()

Answer 5

с лея (@version v1.2.1)

можно имитировать событие щелчка с 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) 

. ..

Испытаны на Firefox 50,0 - 50.0.2 и Microsoft Крае 38.14393.0.0

Answer 6

Решение с JQuery, включая предыдущую/следующую функциональность:

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

Похоже, эта функциональность была включена в код MDL с июня 2017 https://github.com/google/material-design-lite/pull/5091

, но там не было освобождение с декабря 2016 года