材料设计生活-如何以编程方式选择标签

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>

我是否必须在选项卡/面板上添加/删除"is-active"类，或者是否有更简单的方法以编程方式选择选项卡?

Answer 1

据我所知，手动更改选项卡(.mdl-layout__tab)和选项卡面板(.mdl-layout__tab-panel)上的is-active类确实产生了期望的结果，尽管。

使用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 2

可以通过在DOM元素上使用Click()方法来模拟Click事件。

. getelementbyid (AnchorTagId) .click ()

Answer 3

你可以用jquery模拟TAB按钮的点击

ex(以编程方式激活第二个TAB - index 1):

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

ex(以编程方式激活第一个TAB -索引0):

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

Answer 4

目前还没有编程的方式来切换布局选项卡或普通选项卡。用于处理这些问题的对象没有通过小部件系统公开，因此没有指示它们做什么。

请在问题跟踪器上提交功能请求，以便我们在未来的版本中有可操作的内容。

Answer 5

使用MDL (@version 1.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 Edge 38.14393.0.0上测试

Answer 6

jQuery的解决方案，包括previous/next功能:

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

看起来该功能自2017年6月以来已包含在MDL代码中https://github.com/google/material-design-lite/pull/5091

但自2016年12月以来一直没有发布

Answer 8

它为我工作

$("#衰弱的")。标签("选择",选择id);