使用带有标签的 Foundation 5 Joyride

Posted 2023-05-09

【中文标题】使用带有标签的 Foundation 5 Joyride

【英文标题】：using foundation 5 joyride with tabs

【发布时间】：2015-01-14 11:32:08

【问题描述】：

有没有办法用foundation 5 Joyride切换标签？ 我在页面上有基础选项卡，并希望 Joyride 将元素指向不同的选项卡。

【问题讨论】：

我目前正在解决这个完全相同的问题。我目前的方法是使用回调函数来确定下一步是否需要我操作 DOM，如果是这样，您可以将“活动”类附加到所需的选项卡，或者在我的情况下将显示类添加到悬停菜单物品。当我得到它的工作时，我会发布我的代码。

【参考方案1】：

就像 Steven 的评论中提到的那样，您可以在激活所需选项卡的前或后步骤回调函数中使用回调。

post_step_callback     : function (),    // A method to call after each step
pre_step_callback      : function ()    // A method to call before each step

希望这会有所帮助...

【讨论】：

我不再处理这个问题，但讨论这个问题很有趣。 post_step_callback 的问题在于它有一个在每一步之后执行的函数。如何确定当前打开的步骤号并打开所需的选项卡？

【参考方案2】：

这对我有用。我环顾四周，找不到任何有用的东西，所以写了这个。最难的部分是弄清楚如何获取目标锚的 id。这被发现隐藏在回调可用的“this”对象中。

$(this.$target)[0].id;

基础使用“内容”类来标识单击选项卡时要显示的内容。因此，遍历 .parents 树查找封闭元素会为您提供包含链接的内容选项卡。然后当然你必须在你想点击的标签的<a>元素中添加一个id。如果您将其命名为与您的内容 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();
                    
                );
            
        
    );
);

这适用于任何页面，无论是否包含选项卡，因此它可以在整个网站中普遍包含。