m未定义实现css

时间:2018-04-04 22:51:35

标签: materialize

我总是得到错误" M未定义" el未定义

codepen sample

如果您打开控制台,您将看到错误

我首先加载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>

1 个答案:

答案 0 :(得分:7)

我发现了问题,它是版本。

请务必使用version =&gt; 1.0.0。

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

如果您使用版本&lt; 1.0.0,则很可能因“未定义M”而出现错误

确保在实现css之前加载jquery!

此外,您必须首先将elem和选项定义为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);