具体化 CSS 选项卡不显示滚动行为

Question

我不确定为什么我的选项卡元素没有表现出滚动行为。似乎选项卡中的li元素ul溢出到下一行，如下所示。

我认为我已经正确初始化了具体化和选项卡。任何关于为什么会发生这种情况的建议将不胜感激。我尝试禁用所有外部CSS和JS，但它似乎不能解决问题。

Codepen(此处未显示滚动问题，只是代码在那里，因为它很多)

Answer 1

我看到的几件事：

• 在你的代码笔中，你有一个错别字：{swipable: true}->{swipeable: true}
• 您正在使用jQuery，但在代码笔中不包含jQuery，请将其包含在您的代码中
• 请查看此页面上选项卡的文档： https://materializecss.com/tabs.html#swipeable

正如您在 HTML 中看到的，他们对 UL 使用以下标记：

<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
</ul>

重要的是，他们使用a hrefID 与 DIV 元素的 ID 相关联，例如：#test-swipe-1.

Div 元素：

<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>

这样，Materialize 就知道它必须在上面显示哪个 DIV ID