用一个nav-选项卡实现控制多个选项卡内容

Question

我的问题与这个问题非常相似：用一个导航选项卡控制多个选项卡内容

就像问题中的一个一样，我想用一个选项卡点击改变两个id的容器。区别在于我使用的是物化CSS。

这是我的html：

    <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 class="col s12">
      <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>
   <div class="row">
    <div class="col s12">
      <div id="test1a" class="col s12">Test 1A</div>
      <div id="test2a" class="col s12">Test 2A</div>
      <div id="test3a" class="col s12">Test 3A</div>
      <div id="test4a" class="col s12">Test 4A</div>
    </div>
  </div>

这是小提琴：小提琴手

当我单击TEST1时，我希望内容是TEST1和TEST1A。等。

谢谢!

Answer 1

请尝试以下html。

HTML CODE:
    <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col s3"><a href="#test1,#test1a">Test 1</a></li>
            <li class="tab col s3"><a class="active" href="#test2,#test2a">Test 2</a></li>
            <li class="tab col s3"><a href="#test3,#test3a">Disabled Tab</a></li>
            <li class="tab col s3"><a href="#test4,#test4a">Test 4</a></li>
          </ul>
        </div>
        <div class="col s12">
          <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>
    <div class="row">
        <div class="col s12">
          <div id="test1a" class="col s12">Test 1A</div>
          <div id="test2a" class="col s12">Test 2A</div>
          <div id="test3a" class="col s12">Test 3A</div>
          <div id="test4a" class="col s12">Test 4A</div>
        </div>
      </div>