Search code examples
tabsmaterialize

Issues in Switching Tabs in Materialize 1.0.0


I want to select a tab on clicking a link. I tried using different online available solutions
(including $('ul.tabs').tabs('select_tab', 'tab_id');)
but none seems to be work with current materialize version.

The official documentation for materialize states to do the initialization using
var instance = M.Tabs.init(el, options); instance.select('tab_id');
but none of the methods seem to work correctly with current version or has been clearly specified w.r.t Materialize Tabs.

Any help is greatly appreciated. Below is the code snippet along with jsfiddle link,

<html>
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->


<script>

$(document).ready(function() {
    $('ul.tabs').tabs();
    $("#btnContinue").click(function() {
        $('ul.tabs').tabs('select_tab', 'test2');
    });
});



/* var instance = new M.Tabs.init(el, options);


function check_active(){

    var instance = M.Tabs.getInstance(elem);

    instance.select('test2');

}  */


</script>


</head>

<body>

<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' onclick="check_active();">continue</a>-->
  <a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>

</body>

</html>

JSFiddle Link for the same: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/


Solution

  • You should change

    $('ul.tabs').tabs('select_tab', 'test2');
    

    to :

    $('ul.tabs').tabs('select', 'test2');
    

    select shows tab content that corresponds to the tab with the id. JSFiddle