Javascript 加载选定选项卡上的内容（基础） 我使用Zurb基金会6个选项卡。我有一个问题。这是我的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>

我只需要在选择panel3时触发事件。如何操作？

尝试在选项卡

id

上添加条件，以便在选择内容时加载内容，例如：

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

---

希望这有帮助。

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

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

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

});

为基础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);
}); 

---

我刚谈到这个问题

结束使用：

---

<代码> > $（this）。查找（“是活动的A”）。AtTr（“ID”）< /代码>

< P>我在基础6中有一些运气：

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

---

我用的基础6：

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

---

工作得很好。谢谢大家!

$（this）.attr（'id'）

for me始终返回

ul

元素的id:“myTabs”事件数据本身是否不包含有关切换到哪个选项卡的信息？如果没有，那是多么无益。

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