为什么标签内容总是在 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 之间的冲突。解决方案是 uild jquery UI 不包含制表符。 http://jqueryui.com/download/

Answer 2

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

如果您正在使用其他库，那么 $(document).ready(function() { ... 可能会在其他所有内容完全加载之前被触发，您应该使用：

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

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

为什么标签内容总是在 materializecss 中可见

Why tabs content is visible always in materializecss

html

css

jquery

materialize