web-dev-qa-db-fra.com

m n'est pas défini matérialiser css

J'obtiens toujours l'erreur "M n'est pas défini" el n'est pas défini

échantillon codepen

si vous ouvrez la console, vous verrez l'erreur

Je charge d'abord jquery.min.js puis charge matérialiser.min.js .css

puis chargez mon script.js ci-dessous.

M n'est pas reconnu, ce qu'il devrait

pourquoi?

// init materialize tab
 var instance = M.Tabs.init(el, options);

  // Or with jQuery

 $(document).ready(function(){
    $('.tabs').tabs();

 });

C'est html

<div class="row">
  <div class="col s12">
        <ul  class="tabs">
       <li class="tab col s3"><a href="#test1">Test 1</a></li>
       <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
</div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
</div>
materialize
6
hoogw

J'ai trouvé le problème, c'est la version.

Assurez-vous d'utiliser la version => 1.0.0.

 https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js

Si vous utilisez la version <1.0.0, vous avez très probablement une erreur car "M n'est pas défini"

Assurez-vous de charger jquery avant de matérialiser css!

Vous devez également d'abord définir elem et les options de l'onglet init

// init materialize tab
     var elem = $('.tabs')
     var options = {}
     var instance = M.Tabs.init(elem, options);

  //or Without Jquery


    //var elem = document.querySelector('.tabs');
     var options = {}
     var instance = M.Tabs.init(elem, options);
10
hoogw