選項卡內的選項卡不起作用

Question

https://codepen.io/simii/pen/grvxbE

繼承自codepen。

<div class="row"> 
    <div class="col s12"> 
     <ul class="tabs2"> 
     <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 disabled"><a href="#test3">Disabled Tab</a></li> 
     <li class="tab col s3"><a href="#test4">Test 4</a></li> 
     </ul> 
    </div> 
    <div id="test1" class="col s12">Test 1</div> 
    <div id="test2" class="col s12"> 
    <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 disabled"><a href="#test3">Disabled Tab</a></li> 
     <li class="tab col s3"><a href="#test4">Test 4</a></li> 
     </ul> 
    </div> 
    <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 id="test3" class="col s12">Test 3</div> 
    <div id="test4" class="col s12">Test 4</div> 
    </div> 


$(document).ready(function(){ 
$('ul.tabs2').tabs(); 
$('ul.tabs').tabs(); 
}); 

它使用物化框架與jQuery。我不知道該如何改變才能使其發揮作用。

選項卡選擇其他選項卡

Answer 1

默認情況下鏈接，按鈕，表單元素tab鍵切換工程等內

爲了讓他們在其它元件的工作，加上tabindex屬性：

但是，如果您的頁面上有按鈕或表單，則必須小心您的標籤索引與這些元素一起工作 - 該標籤順序是「正確的」。

Answer 2

<li class="tab col s3"><a href="#test1">Test 1</a></li> 

在本節中，href是關鍵球員，你提供必須的內部表也唯一的ID。

請對更新Codepen，其中內標籤也功能

https://codepen.io/KunalMZ/pen/ZOoVjp?editors=1010