Question

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

实体化状态的官方文档使用
var instance = M.Tabs.init(el, options); instance.select('tab_id');
进行初始化，但是这些方法似乎都无法在当前版本中正常工作或已明确指定了wrt实现选项卡。

任何帮助将不胜感激。下面是带有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/

Answer 1

您应该更改

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

至：

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

select显示与具有ID的标签相对应的标签内容。 JSFiddle

在Materialize 1.0.0中切换选项卡中的问题

1 个答案: