在选定的选项卡上加载内容（基础）

Question

我正在使用 Zurb Foundation 6 Tabs。我有一个 javascript 问题。这是我的 html 3 选项卡布局。

<ul class="tabs" data-tabs id="myTabs">     
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1 Info</a></li>
    <li class="tabs-title" ><a href="#panel2">Tab 2 Info</a></li>
    <li class="tabs-title" ><a href="#panel3">Tab 3 Info</a></li>
</ul>

<div class="tabs-content" data-tabs-content="myTabs">
    <div class="tabs-panel is-active" id="panel1">
    ....
    </div>
    <div class="tabs-panel" id="panel2">
    ....
    </div>
    <div class="tabs-panel" id="panel3">
    ....
    </div>
</div>

标签效果很好！但是，我只想在单击时将内容加载到选项卡 3 中。我将使用 ajax 加载内容。 Foundation 6 文档提供了一个 javascript 事件，该事件在单击任何选项卡时触发。见下文：

 $('#myTabs').on('change.zf.tabs', function() {
      console.log('Those tabs sure did change!');
 });

我需要一个仅在选择面板 3 时触发的事件。怎么办？

Answer 1

尝试在选项卡上添加条件 id 您希望在选择时加载内容，例如：

$('#myTabs').on('change.zf.tabs', function() {
   if ($(this).attr('id') == 'panel3')
   {
        //Load content here 
   }
});

希望对您有所帮助。

Answer 2

您可以在 'change.zf.tabs' 事件中使用条件，如下所示：

$('#myTabs').on('change.zf.tabs', function() {

  if($('#panel3:visible').length){
    console.log('Tab 3 is now visible!');
  }

});

Answer 3

对于 Foundation 6（当前版本为 6.2.1），您应该使用以下代码获取已更改选项卡的 ID。

$('#myTabs').on('change.zf.tabs', function()
{
    var tabId = $('div[data-tabs-content="'+$(this).attr('id')+'"]').find('.tabs-panel.is-active').attr('id');
    alert(tabId);
});

Answer 4

我刚遇到这个问题。

结束使用：

$(this).find('.is-active a').attr('id')

Answer 5

我在 Foundation 6 中运气不错：

$('.tabs').on('change.zf.tabs', function(event, tab){
    console.log(tab.children('a').attr('id'));
    console.log(tab.children('a').attr('href'));
});

Answer 6

对于 Foundation 6，我使用了：

$("#section-tabs").on('change.zf.tabs', function (event, tab) {
        var tabId = tab.attr("id");
})

在选定的选项卡上加载内容（基础）

Load content on tab selected (Foundation)

javascript

css

ajax

jquery

zurb-foundation