我的问题与这个非常相似:Control multiple tab-contents with one nav-tabs
就像那个问题一样,我想一键更改两个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>
这是 fiddle :Jsfiddle
当我点击TEST1时,我希望内容是TEST1和TEST1A。等
谢谢!
最佳答案
请尝试下面的 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>
关于javascript - 使用一个导航选项卡实现控制多个选项卡内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39745321/