有没有办法用基础 5 Joyride 切换标签?我在页面上有基础选项卡,并希望 Joyride 指向不同选项卡上的元素。
就像 Steven 的评论中提到的,您可以在激活所需选项卡的前或后步骤回调函数中使用回调。
post_step_callback : function (){}, // A method to call after each step
pre_step_callback : function (){} // A method to call before each step
希望这有帮助...
这是对我有用的方法。 我环顾四周,找不到任何有用的东西,所以写了这篇文章。 最困难的部分是弄清楚如何获取目标锚点的 id。 这被发现隐藏在回调可用的"this"对象中。
$(this.$target)[0].id;
基金会使用"content"类来标识单击选项卡时要显示的内容。 因此,在 .parents 树中向上遍历找到封闭元素会为您提供包含链接的内容选项卡。 然后,当然,您必须将id添加到要单击的选项卡的<a>
元素中。 如果您将其命名为您的内容div 相同,并附加"-a",您应该很高兴。
.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();
}
});
}
}
});
});
这将适用于任何页面,无论它是否包含选项卡,因此它可以普遍包含在整个站点中。