如何使用< a>触发下一个标签页或< button>实现的要素 [英] how to trigger next tab with <a> or <button> element in materialize
本文介绍了如何使用< 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>
我正在尝试导航到下一个标签.我已附上图片以更好地理解.
i am trying to navigate to next tab after clicking on the button or link such as "Continue Button" in materializeCss. I have attached the image for better understanding.
推荐答案
请参阅Materialize
http://materializecss.com/tabs.html
在.click()
事件上编写代码,如下所示.
Write your code on .click()
event, as following.
$(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>
这篇关于如何使用< a>触发下一个标签页或< button>实现的要素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文