使用粉底5 joyride與標籤

Question

有沒有辦法切換標籤與基礎5 Joyride？ 我在頁面上有基礎選項卡，並希望Joyride指向不同選項卡上的元素。

Answer 1

正如在Steven的評論中提到的那樣，您可以使用回調函數的前後步驟回調函數來激活所需的選項卡。

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

希望這有助於...

Answer 2

下面是我工作。我環顧四周，找不到任何有用的東西，所以寫了這個。最難的部分是弄清楚如何獲得目標錨的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(); 
        } 
       }); 
      } 
     } 
    }); 
}); 

這將工作在任何網頁上，它是否包含標籤或沒有，所以它可以廣泛包括整個網站。