Question

我不确定为什么我的tabs元素没有显示滚动行为。标签li中的ul元素似乎只是溢出到下一行，如图here所示。

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

Codepen（此处未显示滚动问题，因为其中包含大量代码，所以没有显示）

Answer 1

我看到的几件事：

在Codepen中有一个错字：{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 href ID与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>

通过这种方式，Materialise知道必须在上面显示哪个DIV ID

物化CSS标签不显示滚动行为

1 个答案: