<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.
我点击了materializeCss中的“继续按钮”按钮或链接后,我试图导航到下一个标签。我附上了图片以便更好地理解。
3 个解决方案
#1
6
Refer to document of Materialize
请参阅Materialise文档
http://materializecss.com/tabs.html
Write your code on .click()
event, as following.
在.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>
#2
1
$(document).ready(function() {
$("#btnContinue").click(function() {
var el = document.getElementById("tabs");
var instance = M.Tabs.getInstance(el);
instance.select('test2');
});
});
#3
0
The below works, though I noticed it may be slightly delayed as it goes through the entire document. It uses a wildcard selector (*) and that can be changed to (^) -- will match if the attribute begins with the given string (think class prefixes).
下面的工作,虽然我注意到它可能会略微延迟,因为它贯穿整个文档。它使用通配符选择器(*)并且可以更改为(^) - 如果属性以给定字符串开头(想想类前缀),则匹配。
$(document).on('click', 'a[href*="#"]', function() {
$('ul.tabs').tabs('select_tab', this.hash.slice(1));
});
#1
6
Refer to document of Materialize
请参阅Materialise文档
http://materializecss.com/tabs.html
Write your code on .click()
event, as following.
在.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>
#2
1
$(document).ready(function() {
$("#btnContinue").click(function() {
var el = document.getElementById("tabs");
var instance = M.Tabs.getInstance(el);
instance.select('test2');
});
});
#3
0
The below works, though I noticed it may be slightly delayed as it goes through the entire document. It uses a wildcard selector (*) and that can be changed to (^) -- will match if the attribute begins with the given string (think class prefixes).
下面的工作,虽然我注意到它可能会略微延迟,因为它贯穿整个文档。它使用通配符选择器(*)并且可以更改为(^) - 如果属性以给定字符串开头(想想类前缀),则匹配。
$(document).on('click', 'a[href*="#"]', function() {
$('ul.tabs').tabs('select_tab', this.hash.slice(1));
});