javascript - Materialise CSS 垂直制表符位置

Question

我已经使用 Materialize CSS 创建了垂直选项卡，但我无法做的是定位。我想要这样的结果。单击 TAB 3 时，内容应从同一级别开始。

这是我的 HTML

<div class="container">
  <div class="row">
    <div class="col m4">
      <ul class="tabs">
        <li class="tab"><a href="#test1">Tab 1</a></li>
        <li class="tab"><a class="active" href="#test2">Tab 2</a></li>
        <li class="tab"><a href="#test3">Tab 3</a></li>
        <li class="tab"><a href="#test4">Tab 4</a></li>
        <li class="tab"><a href="#test5">Tab 5</a></li>
        <li class="tab"><a href="#test6">Tab 6</a></li>
      </ul>
    </div>
    <div class="col m8">
      <div id="test1" class="col tab-content">Tab 1</div>
      <div id="test2" class="col tab-content">Tab 2</div>
      <div id="test3" class="col tab-content">Tab 3</div>
      <div id="test4" class="col tab-content">Tab 4</div>
      <div id="test5" class="col tab-content">Tab 4</div>
      <div id="test6" class="col tab-content">Tab 4</div>
    </div>
  </div>
</div>

和CSS

.tabs{
height: auto;
white-space: normal;
}
.tab{
display: block;
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.tab-content{
height: 200px;
width: 100%;
background: #fcfcfc;
border:1px solid #f0f0f0;
}
.indicator{
display: none;
}

Answer 1

对于那些只想使用极其简单的选项卡的人，请使用此链接 my simple materialized css vertial tab

对于那些想要使用类似于我的 css 样式的高级全页 css 布局的人，请使用此链接 This is my working codepen

这个想法是原始的materializedcss 1.0.0 不支持垂直制表符!!!

他们不会这样做，您必须修改原始选项卡 css 的覆盖，将其转换为垂直

如何做？请参阅我的 scss，您必须将其编译为 css，然后才能添加到样式标记

.tabs-vertical {
.tabs {
    height: auto;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    display: -webkit-flex;
    display: flex;
  
}

.tab {
    width: 100%;

    .active {
        -moz-transition: border-color .5s ease;
        -o-transition: border-color .5s ease;
        -webkit-transition: border-color .5s ease;
        transition: border-color .5s ease;
        border-right: 3px solid #424242;
    }

    :hover {
        border-right: 3px solid #eeeeee;
    }
}

.indicator {
    display: none;
}

    .tab-content {
    display : none
  }

    > .tab-content .active{
    display : block
  }
}