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

Я использую вкладку 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>

Нужно ли добавлять/удалять класс "is-active" на вкладке/панели или есть ли более простой способ выбора вкладки программно?

Ответы

Ответ 1

Насколько я могу судить, ручное изменение класса 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');

Ответ 2

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

document.getElementById( "AnchorTagId" ). Нажмите()

Ответ 3

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

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

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

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

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

Ответ 4

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

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

Ответ 5

с mdl (@version v1.2.1)

вы можете имитировать событие click с помощью 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 Edge 38.14393.0.0

Ответ 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();
});