在 Material Design Light 中选择选项卡时调用函数

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

<!-- 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();"到“绘图”选项卡，但在激活选项卡之前调用函数的速度太快。有什么方法可以在该选项卡激活时获取事件吗？

谢谢。

发生这种情况是因为元素内联事件是第一个被执行的事件。

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

使用 Javascript Vanilla：

首先在链接上添加一个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();        
});