I'm trying to call a function when the tab is changed. Nothing is happening though, does someone see my mistake?
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");
}
here the 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>
On the elem var you should put the javascript object instead of the jQuery one.
From materialize doc:
var instance = M.Tabs.init(el, options);
// Or with jQuery
$(document).ready(function(){
$('.tabs').tabs();
});
Try var elem = $('.tabs')[0] or var elem = $('.tabs').eq(0)
I have not tested this but I believe it will fix your problem