web-dev-qa-db-ja.com

mはcssを具体化しません

「Mは定義されていません」というエラーが常に表示されますelは定義されていません

codepenサンプル

コンソールを開くと、エラーが表示されます

最初にjquery.min.jsをロードし、次にmaterialize.min.js .cssをロードします

次に、以下のscript.jsをロードします。

Mは認識されません。

どうして？

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

  // Or with jQuery

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

 });

これは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

問題が見つかりました、それはバージョンです。

バージョン=> 1.0.0を使用していることを確認してください

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

バージョン<1.0.0を使用する場合、「Mは定義されていません」というエラーが発生する可能性が高い

CSSを具体化する前に必ずjqueryをロードしてください！

また、最初にタブを初期化する要素とオプションを定義する必要があります

// 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