how to trigger next tab with <a> or <button> element in materialize

10,534

Solution 1

Refer to document of Materialize

http://materializecss.com/tabs.html

Write your code on .click() event, as following.

$(document).ready(function() {
  $('ul.tabs').tabs();
  $("#btnContinue").click(function() {
    $('ul.tabs').tabs('select_tab', 'test2');
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

<div class="col s12">
  <ul class="tabs">
    <li class="tab col s4"><a href="#test1" class="active">tab1</a>
    </li>
    <li class="tab col s4"><a href="#test2">tab2</a>
    </li>
    <li class="tab col s4"><a href="#test4">tab3</a>
    </li>
  </ul>
</div>

<div id='test1' class="col s12">
  <a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>

Solution 2

$(document).ready(function() {          
  $("#btnContinue").click(function() {
    var el = document.getElementById("tabs");
    var instance = M.Tabs.getInstance(el);
    instance.select('test2');
  });
});

Solution 3

The accepted answer doesn't work for the Jquery and materialize version mentioned below. Instead of "select_tab" method, we need to call "select" method here ( probable select_tab is deprecated )

The below code works for JQuery v3.2.1 and Materialize v1.00-rc.2

 $(document).ready(function(){
        $('ul.tabs').tabs();
        $('#btnContinue').click(function(){
            $('ul.tabs').tabs("select", "tab2");
        });     
 });
Share:
10,534
Sagar Sinha
Author by

Sagar Sinha

Updated on June 28, 2022

Comments

  • Sagar Sinha
    Sagar Sinha over 1 year
    <div class="col s12">
      <ul class="tabs">
       <li class="tab col s4"><a href="#test1"  class="active">tab1</a></li>
        <li class="tab col s4"><a href="#test2">tab2</a></li>
        <li class="tab col s4"><a href="#test4">tab3</a></li>
      </ul>
    </div>
    
    <div id='test1' class="col s12">
       <a href='#test2' >continue</a>
    </div>
    <div id='test2' class="col s12"></div>
    

    i am trying to navigate to next tab enter image description hereafter clicking on the button or link such as "Continue Button" in materializeCss. I have attached the image for better understanding.