单击“materializeCss”中的“继续按钮”按钮或链接后，如何使用<a> or </a> <按钮> <a> element in materialize

Question

<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 触发下一个标签页。我附上了图片以便更好地理解。

Answer 1

请参阅Materialize

的文件

http://materializecss.com/tabs.html

在.click()事件上编写代码，如下所示。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

Answer 3

可接受的答案不适用于以下提到的Jquery和物化版本。代替“ select_tab”方法，我们需要在这里调用“ select”方法（可能不推荐使用select_tab）

以下代码适用于JQuery v3.2.1和Materialize v1.00-rc.2

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

Answer 4

以下作品，虽然我注意到它可能会稍微延迟，因为它贯穿整个文档。它使用useful documentation（*）并且可以更改为（^） - 如果属性以给定字符串开头（认为类前缀），则匹配。

$(document).on('click', 'a[href*="#"]', function() {
    $('ul.tabs').tabs('select_tab', this.hash.slice(1));
});