选中标签上的加载内容（基础）

我正在使用Zurb Foundation 6 Tabs。我有一个JavaScript问题。这是我的一个3选项卡布局的HTML。选中标签上的加载内容（基础）

<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>

这些标签非常棒！但是，我只想在点击时将内容加载到Tab 3中。我将使用ajax来加载内容。 Foundation 6文档提供了一个JavaScript事件，当任何选项卡被点击时触发。见下：

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

我需要一个事件，只有在选择panel3时才会触发。怎么做？

来源

2015-12-14 Fox

您可以使用条件内“change.zf.tabs”事件，像这样：

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

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

});

来源

2015-12-14 17:37:06

工作完美。谢谢！ – Fox

尝试在选项卡中添加条件id要在它的选择要加载的内容，e.g：

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

希望这有助于。

来源

2015-12-14 17:28:59

'$（本）.attr（ '身份证'）'对我来说总是返回'ul'元素的id：“myTabs” – Laimoncijus

事件数据本身是否不包含关于哪个选项卡已被切换到的信息？如果没有帮助，这是多么无益。 – Ade

不幸的是.. –

对于基金会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); 
});

来源

2016-04-22 18:50:11 Piet

我刚来到这个问题。

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

来源

2016-10-25 09:57:21 killebytes

我有在基金会6一些运气与此：

使用截止

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

来源

2017-02-15 04:44:13

选中标签上的加载内容（基础）

回答

相关问题