Выберите конкретную вкладку в Materilize CSS, используя Jquery - PullRequest
Новая
       7

Выберите конкретную вкладку в Materilize CSS, используя Jquery

0 голосов
/ 20 ноября 2018

Я использую materlize css version 1.0 с jquery.

Я хочу выбрать вкладку с помощью jquery, и я делаю следующее 

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

Но, похоже, это не работает.

Я вижу приведенный ниже синтаксис на официальном сайте. 

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

1 Ответ

0 голосов
/ 20 ноября 2018

Вот рабочая демка: 

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