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>

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

谢谢。

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

Answer 2

对我来说，挂钩click事件是不够的。超时至少为0毫秒是必要的，否则内容显示它仍将设置为无（在Chrome上测试），并且您自己的任何需要宽度计算的绘图可能会失败。检查附加的片段并验证没有setTimeout，在click事件上，选项卡内容显示设置为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!");
});

在材料设计指示灯中选择选项卡时调用功能

3 个答案: