Estoy tratando de llamar a una función cuando se cambia la pestaña. Sin embargo, no pasa nada, ¿alguien ve mi error?
V1:
var elem = $('.tabs') var options = { onShow: tabChange} var init_tabs = M.Tabs.init(elem, options); var instance_tabs = M.Tabs.getInstance(elem); function tabChange() { console.log("tab has changed"); }V2:
document.addEventListener("DOMContentLoaded", function () { var elem = document.getElementById("periodselector"); var options = { onShow: tabChange } var init_tabs = M.Tabs.init(elem, options); }); function tabChange() { console.log("tab has changed"); }aquí el HTML:
<div class="card-tabs"> <ul class="tabs tabs-fullwidth " id="periodselector"> <li class="tab col s3 "><a id="daySelector" class=" " href="#DayTab">Tag</a> </li> <li class="tab col s3 "><a id="monthSelector" class=" " href="#MonthTab">Monat</a> </li> <li class="tab col s3 "><a class=" " href="#YearTab">Jahr</a> </li> </ul> </div>En el elem var, debe colocar el objeto javascript en lugar del jQuery.
De materializar doc:
var instance = M.Tabs.init(el, options); // Or with jQuery $(document).ready(function(){ $('.tabs').tabs(); }); Prueba var elem = $('.tabs')[0] o var elem = $('.tabs').eq(0)
No he probado esto, pero creo que solucionará su problema.