在 material design light 中选择选项卡时调用函数

Question

我在页面上有三个选项卡。

<!-- Tabs -->
<div class="mdl-layout__tab-bar">
  <a href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
  <a href="#plots-data-tab" class="mdl-layout__tab">Plots data</a>
  <a href="#report-tab" class="mdl-layout__tab">Report</a>
</div>

选择绘图选项卡后，我需要重新绘制绘图。我已经尝试 onclick="redraw_plots();" 到 Plots 选项卡，但是在选项卡被激活之前函数被调用得太快了。激活此选项卡时有什么方法可以获取事件？

谢谢。

Answer 1

这是因为元素内联事件是第一个被执行的事件。

要在 MDL 选项卡事件后执行，您可以这样做：

与 Javascript 香草：

首先在link

上添加一个id

<a id="#plots-tab" href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>

其次添加一个事件监听器

document.getElementById("#plots-tab").addEventListener("click", function(){
   redraw(); 
});

或 Jquery:

在元素上添加事件侦听器

$('a[href="#plots-tab"]').on('click',function(){
   redraw();        
});

Answer 2

对我来说，仅仅挂钩到点击事件是不够的。至少 0 毫秒的超时是必要的，否则内容显示仍将设置为 none（在 Chrome 上测试）并且您自己的任何需要宽度计算的绘图可能会失败。检查附加的片段并验证在没有 setTimeout 的情况下，在单击事件中选项卡内容显示设置为 none 而不是 'block'。 MDL 必须播放动画才能平滑过渡，这会导致绝对位置绘制问题。

$('.mdl-layout__tab-bar').children().each(function(){
  
  $(this).on('click', function(){
    var timeout = 0;
    var targetContent = this.getAttribute('href');
    
    setTimeout(function(){
      if($(targetContent).css('display') == "block"){
         console.info("tab content is now visible after a timeout of %s millisenconds", timeout);
      }
      else{
      console.warn("increase timeout to make sure that content is visible");
      }
    }, timeout);
    
   
  });
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <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="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
      <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
      <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
      <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  </div>
  <main class="mdl-layout__content">
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content">
        Tab 1
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content">
      Tab 2
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content">
      Tab 3
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-4">
      <div class="page-content">
      Tab 4
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-5">
      <div class="page-content">
      Tab 5
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-6">
      <div class="page-content">
      Tab 6
      </div>
    </section>
  </main>
</div>

Answer 3

不向 a 标签添加任何特殊内容的另一种解决方案是

$("a.mdl-layout__tab").click(event => {
    console.log("Tab switched!");
});

在 material design light 中选择选项卡时调用函数

Call a function when tab selected in material design light

javascript

material-design-lite