在材料设计指示灯中选择选项卡时调用功能 [英] Call a function when tab selected in material design light

问题描述

我在页面上有三个标签。

I have three tabs on the page.

<!-- 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>

我需要在选择Plots选项卡时重新绘制图。我试过 onclick =redraw_plots（）;到图选项卡，但是在激活选项卡之前调用函数的速度太快。当此选项卡激活时，是否可以获取事件？

I need to re-draw plots when Plots tab is selected. I've tried to onclick="redraw_plots();" to the Plots tab, but function is called too fast before tab is activated. Any way to get an event when this tab activates?

谢谢。

推荐答案

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

It's happen because element inline event are the first event to be executed.

要在MDL标签事件后执行，你可以这样做：

To Execute after MDL tab event you can do like this:

使用Javascript Vanilla ：

With Javascript Vanilla:

首先在链接上添加ID

First add an id on link

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

第二次添加事件监听器

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

或者使用Jquery：

Or with Jquery:

添加元素上的事件监听器

Add on event listener on element

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

这篇关于在材料设计指示灯中选择选项卡时调用功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！