javascript - 如何在实现中使用<a>或<button>元素触发下一个选项卡

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

我在materializeCss中单击按钮或链接(例如“继续按钮”)后，尝试导航到下一个选项卡。我已附上图片以更好地理解。

最佳答案

请参阅Materialize文件

http://materializecss.com/tabs.html

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

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