Materialze CSS Tabs not working

1

I tried to use the example code on the official doc page.
But still it wont work…
https://materializecss.com/tabs.html

https://codepen.io/zhouxiang19910319/pen/QWbdxmN?editors=1010

Does anyone know why???

2
  1. You are missing the code that actually makes the tabs do something.
// jQuery code
$(document).ready(function(){
  $('.tabs').tabs();
});
  1. If you are going to use jQuery for the code, it needs to be loaded before materialize.min.js (change the load order under the JS section).
1 Like
3

I see… Thanks. (20 character)

4

No problem.

Here is it with plain JS and the options object with the default values. You can check the docs to see what the options are for.

window.addEventListener("DOMContentLoaded", event => {
  const options = {
    duration: 300,
    onShow: null,
    swipeable: false,
    responsiveThreshold: Infinity
  };

  const tabsContainer = document.querySelector(".tabs");
  M.Tabs.init(tabsContainer, options);
});
5

ah… thank you so much… I just got into js… I was too shy to ask you to do the javascript version. LOL.

6