2016-07-25 13 views
0

https://codepen.io/simii/pen/grvxbERegisterkarten innerhalb einer Registerkarte funktionieren nicht

Heres der 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(); 
}); 

Seine Verwendung materialisieren Rahmen mit jquery. Ich weiß nicht, was ich ändern soll, damit es funktioniert.

Tabs in einem anderen Tab

+0

, was genau nicht funktioniert? – Toby

Antwort

0

standardmäßig funktioniert auf Links Tabbing, Knöpfe, Formularelemente usw.

Um sie auf anderen Elementen arbeiten zu lassen, fügen Sie das Attribut tabindex:

Wenn Sie jedoch Schaltflächen oder Formulare auf Ihrer Seite haben, müssen Sie darauf achten, dass Ihre Tab-Indizes neben diesen Elementen funktionieren - diese Tab-Reihenfolge ist "korrekt".

+0

Richtig, aber das Problem hier ist, dass seine Tabs (gemeint als Komponente) überhaupt nicht funktionieren. – actimel

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

In diesem Abschnitt href ist der Schlüsselspieler, die ID, die Sie sehen auch die inneren Tabellen eindeutig sein muss.

Bitte schauen Sie auf der aktualisierten Codepen, wo Innenlaschen auch funktionell sind

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