Select Materilize css 中的特定选项卡使用 Jquery

Question

我正在使用 materlize css version 1.0 和 jquery。

我想通过 jquery select 一个 Tab，我正在执行下面的操作

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

但这似乎不起作用。

我在官方网站上看到了下面的语法。

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

Answer 1

这是工作演示：

$(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>

Select Materilize css 中的特定选项卡使用 Jquery

Select a specific Tab in Materilize css using Jquery

jquery

materialize