为什么标签内容始终在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')初始化了标签.tab();

你能帮我理解为什么我得到这个奇怪的输出？先感谢您.

Answer 1

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