为什么标签内容始终在materializecss中可见

Question

我试图测试如何使用materialize创建标签，我正在测试此代码

<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"><a href="#test3">Test 3</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>

问题是所有div的内容始终可见，如下图所示

我用这行$（'ul.tabs'）初始化标签。tabs（）;

你能帮助我知道为什么我会得到这种奇怪的输出吗？提前谢谢。

Answer 1

我在同一个项目中使用了jqueryUI，这导致了jQuery ui和materilizecss之间的冲突。解决方案是构建不包含选项卡的jquery UI。 http://jqueryui.com/download/

Answer 2

这可能是由于脚本的加载顺序。

如果你正在使用其他图书馆，那么$(document).ready(function() { ...在其他所有图片被完全加载之前就已被触发了，你应该使用：

$(window).on('load', function() {
  ...
});

另外，请记住，如果您的脚本来自cdn，则应检查async和defer属性。