有没有办法用基础5 Joyride切换标签? 我在页面上有基础标签,并希望Joyride将元素指向不同的标签。
答案 0 :(得分:0)
就像史蒂文的评论中提到的那样,您可以在前步或后步回调功能中使用回调来激活您需要的选项卡。
post_step_callback : function (){}, // A method to call after each step
pre_step_callback : function (){} // A method to call before each step
希望这会有所帮助......
答案 1 :(得分:0)
这对我有用。我环顾四周,找不到任何有用的东西,所以写了这个。最困难的部分是弄清楚如何获得目标锚的id。这被发现埋藏在这个'对象可用于回调。
$(this.$target)[0].id;
&#39;内容&#39;基础使用class来标识单击选项卡时要显示的内容。因此,遍历.parents树查找封闭元素会为您提供包含链接的内容选项卡。然后,您必须在要单击的选项卡的<a>
元素中添加ID。如果您将其命名为与内容div相同,则使用&#39; -a&#39;附上,你应该好好去。
HTML:
<dl class="tabs radius" data-tab id="my_tabs">
<dd class="active"><a href=\"#tab1\" id=\"tab1-a\">Tab 1</a></dd>
<dd class="active"><a href=\"#tab2\" id=\"tab2-a\">Tab 2</a></dd>
</dl>
<div class="tabs-content">
<div class="content" id="tab1">
<article id="joyride_stop1">...</article>
</div>
<div class="content" id="tab2">
<article id="joyride_stop2">...</article>
</div>
</div>
js:
$(document).ready(function() {
$(document).foundation('joyride', 'start', {
pre_step_callback: function(i, tip) {
var target = $(this.$target)[0].id;
if($('#' + target).parents('.content').length > 0) {
$('#' + target).parents('.content').each(function() {
var id = $(this).attr('id');
if($('#' + id).is(':visible') == false) {
$('#' + id + '-a').click();
}
});
}
}
});
});
这适用于任何页面,无论它是否包含标签,因此它可以在网站上普遍包含。