タブ内のタブが機能しない

Question

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

Heres the 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を使用してそのマテリアライズフレームワークを使用しています。私はそれを機能させるために何を変えるべきかを知らない。彼らはtabindex属性を追加し、他の要素上で動作させるためにはなど別のタブ内の

タブ

Answer 1

はリンク、ボタン、フォーム要素のデフォルトの作品をタブ移動、

：

ただし、ページにボタンやフォームがある場合は、タブの順序が「正しい」という要素と一緒にタブインデックスが機能するように注意する必要があります。このセクションでは

Answer 2

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

、hrefがキープレーヤーである、あなたが提供するIDも、内側のテーブルの一意である必要があります。

動作していない、まさに内側のタブも

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