jquery - 使用 Jquery 在 Materialize css 中选择一个特定的选项卡

Question

我正在使用 materlize css 1.0 版，带有 jquery。

我想通过 jquery 选择一个 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>