时间戳

首页 > 解决方案 > 在 Materialise 1.0.0 中切换选项卡的问题

tabs - 在 Materialise 1.0.0 中切换选项卡的问题

问题描述

我想在单击链接时选择一个选项卡。我尝试使用不同的在线可用解决方案
(including $('ul.tabs').tabs('select_tab', 'tab_id');)
，但似乎没有一个适用于当前的物化版本。

物化状态的官方文档使用
var instance = M.Tabs.init(el, options); instance.select('tab_id');
，但没有一种方法似乎在当前版本中正常工作，或者在物化选项卡中明确指定。

任何帮助是极大的赞赏。下面是代码片段以及 jsfiddle 链接，

<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 链接：https ://jsfiddle.net/chirag_cyber/6evpqcfb/6/

标签： tabsmaterialize

解决方案

你应该改变

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

至 ：

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

select显示与具有 id 的选项卡相对应的选项卡内容。JSFiddle

推荐阅读