javascript - Load content on tab selected (Foundation) - Stack Overflow

admin管理员组

文章数量:1237556

I am using Zurb Foundation 6 Tabs. I have a javascript question. Here is my html for a 3 tab layout.

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

The tabs work great! However, I want to load content into Tab 3 only when clicked. I will be using ajax to load the content. Foundation 6 docs provide a javascript event that fires when ANY tab is clicked on. See below:

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

I need an event to fire ONLY when panel3 is selected. How to do?

I am using Zurb Foundation 6 Tabs. I have a javascript question. Here is my html for a 3 tab layout.

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

The tabs work great! However, I want to load content into Tab 3 only when clicked. I will be using ajax to load the content. Foundation 6 docs provide a javascript event that fires when ANY tab is clicked on. See below:

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

I need an event to fire ONLY when panel3 is selected. How to do?

• javascript
• jquery
• css
• ajax
• zurb-foundation

Share Improve this question Follow edited Dec 14, 2015 at 17:51 Zakaria Acharki 67.5k1515 gold badges7878 silver badges105105 bronze badges asked Dec 14, 2015 at 17:19 FoxFox 8311 silver badge55 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 14

You can use condition inside 'change.zf.tabs' event, like this:

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

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

});

For Foundation 6 (current version is 6.2.1) you should use the following code to get the ID of the changed tab.

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

Try to add condition on tab id you want to load content when it's selected, e.g :

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

Hope this helps.

I just came to this problem.

Ended using:

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

I'm having some luck with this in Foundation 6:

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

For Foundation 6 I used:

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

本文标签： javascriptLoad content on tab selected (Foundation)Stack Overflow