Вызовите функцию, когда вкладка выбрана в свете дизайна материала

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();" на вкладку «Графики», но функция вызывается слишком быстро до активации вкладки. Любой способ получить событие при активации этой вкладки?

спасибо.

Answer 1

Это происходит потому, что событие inline элемента является первым событием, которое должно быть выполнено.

Для Выполнить после закладке MDL случае вы можете сделать так:

С Javascript Vanilla:

Сначала добавьте идентификатор на ссылку

<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), и любой собственный чертеж, требующий вычисления ширины, может завершиться неудачей. Проверьте прикрепленный фрагмент и убедитесь, что без события setTimeout в событии клика на дисплее содержимого вкладки установлено значение 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>