jquery - Tabs inside a tab does not work -


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

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

its using materialize framework jquery. don't know change make work.

tabs inside tab

tabbing works default on links, buttons, form elements, etc.

in order have them work on other elements, add tabindex attribute:

however, if have buttons or forms on page, you'll have careful tab indexes work alongside elements - tab order "correct".


Comments

Popular posts from this blog

jOOQ update returning clause with Oracle -

c# - Json.Net Serialize String from URI -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -