javascript - 在 Material 设计灯中选择选项卡时调用函数

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 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();        
});