在材料设计灯中选择选项卡时调用函数

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>

I need to re-draw plots when Plots tab is selected.我尝试onclick="redraw_plots();" 到 Plots 选项卡，但在激活选项卡之前调用函数太快。激活此选项卡时有什么方法可以获取事件？

谢谢。

Answer 1

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

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

使用 Javascript 原版：

首先在链接上添加一个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 毫秒的超时是必要的，否则内容显示仍将设置为无（在 Chrome 上测试）并且您自己的任何需要宽度计算的绘图都可能失败。 检查附加的 sn-p 并验证在没有 setTimeout 的情况下，在单击事件上，选项卡内容显示设置为无而不是“阻止”。 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!");
});