Select a specific Tab in Materilize css using Jquery

Question

I am using materlize css version 1.0 with jquery.

I want to select a Tab through jquery and I am doing the below

 $(".tabs").tabs("select", "#tabId");

But this does not seem to be working.

I see the below syntax in the official site.

 $('.tabs').tabs('methodName', paramName);

Answer 1

Here is working demo :

$(document).ready(function(){
     // initialize tab
    $('.tabs').tabs();
    
    // select tab 2 on document load
    $('.tabs').tabs('select','test2');
  });
        
       
$(document).on('click','.btn',function(){
   var tab=$(this).attr('data-tab');
   $('.tabs').tabs('select','test'+tab);
});

 <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            

 <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 href="#test2">Test 2</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
  </div>
  
 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>
 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>