实现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

这个想法是原始的物化css 1.0.0 不支持垂直制表符！！！

他们不会这样做，您必须修改原始标签CSS的覆盖以将其转换为垂直标签

如何？看到我的scss，必须先将其编译为css，然后再添加到样式标签中

output3